提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

基于jQuery实现下拉框

jQuery 实现 基于 下拉框
2023-06-13 09:15:31 时间

项目中经常会遇到下拉框，在扁平化和响应式布局大行其道的今天，使用jQuery来实现下拉框就十分的必要了，而且也会美观很多，这里就给大家推荐一段基于jQuery的下拉框代码。

jQuery代码：

复制代码代码如下:


       $(function(){
           $("#add").click(function(){
               var$options=$("#select1option:selected");
               $options.appendTo("#select2");
           });
           $("#remove").click(function(){
               var$options=$("#select2option:selected");
               $options.appendTo("#select1");
           });
           $("#add_all").click(function(){
               var$options=$("#select1option");
               $options.appendTo("#select2");
           });
           $("#remove_all").click(function(){
               var$options=$("#select2option");
               $options.appendTo("#select1");
           });
           $("#select1").dblclick(function(){
              var$options=$("option:selected",this);//获取选中的选项
               $options.appendTo("#select2");
           });
           $("#select2").dblclick(function(){
               var$options=$("option:selected",this);//获取选中的选项
               $options.appendTo("#select1");
           });
       });

HTML代码：

复制代码代码如下:


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

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

相关文章