基于jQuery实现下拉框

2020-05-22 15:13:08易采站长站整理

                $options.appendTo(‘#select1’);
            });
        });

HTML代码:


   <div style=”width: 250px”>
   <div class=”content” style=”float: left”>
       <select multiple id=”select1″ style=”width: 100px;height: 160px;”>
           <option value=”1″>选项1</option>
           <option value=”2″>选项2</option>
           <option value=”3″>选项3</option>
           <option value=”4″>选项4</option>
           <option value=”5″>选项5</option>
           <option value=”6″>选项6</option>
           <option value=”7″>选项7</option>
           <option value=”8″>选项8</option>
       </select>
       <div>
           <span id=”add”>选中添加到右边>></span><br>
           <span id=”add_all”>全部添加到右边>></span>
       </div>
   </div>
   <div style=”float: right;”>
       <select multiple id=”select2″ style=”width: 100px;height: 160px;”>
       </select>
       <div>
           <span id=”remove”><<选中删除到左边</span><br>
           <span id=”remove_all”><<全部删除到左边</span>
       </div>
   </div>
</div>

是不是很简单?小伙伴们需要的话直接就可以拿到项目中使用了。