zoukankan      html  css  js  c++  java
  • 基于jquery和bootstrap的下拉框左右选择功能

    实现如图选择的功能,可以用基于bootstrap的样式,结合jquery事件:

    <div class="row">
         <div class="col-xs-3">
              <select name="from" id="select1" class="form-control" size="10">
                     <option value="1">Item 1</option>
                     <option value="2">Item 2</option>
                     <option value="3">Item 3</option>
                     <option value="4">Item 4</option>
                     <option value="5">Item 5</option>
               </select>
          </div>
                                    
          <div class="col-xs-2">
               <button type="button" id="rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
               <button type="button" id="rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
               <button type="button" id="leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
               <button type="button" id="leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
          </div>
                                    
          <div class="col-xs-3">
               <select name="to" id="select2" class="form-control" size="10"></select>
          </div>
     </div>
    function select_init() {
            //将左边所有选项添加到右边
            $('#rightAll').click(function() {
                $('#select1 option').appendTo('#select2');
            })
            //将左边选中的选项添加到右边
            $('#rightSelected').click(function() {
                $('#select1 option:selected').appendTo('#select2');
            })
            
            //将右边所有选项添加到左边
            $('#leftAll').click(function() {
                console.log("点击右边")
                $('#select2 option').appendTo('#select1');
            })
            //将左边选中的选项添加到右边
            $('#leftSelected').click(function() {
                $('#select2 option:selected').appendTo('#select1');
            })
            
            //双击左边选项直接添加到右边的效果
            $('#select1').dblclick(function(event) {  
                $("option:selected",this).appendTo('#select2')  
            });
            //双击右边选项直接添加到左边的效果
            $('#select2').dblclick(function(event) {  
                $("option:selected",this).appendTo('#select1')  
            });
        }

    这样就可以简单实现想要的效果啦!

  • 相关阅读:
    oracle数据库物理结构逻辑结构内存区块进程管理
    系统的数据库设计
    大数据和高并发的解决方案总结
    Asp.net+WebSocket+Emgucv实时人脸识别
    初识Docker
    变位词程序的实现
    分布式系统常见问题#转载
    六类排序算法的C#实现
    Asp.net MVC 中Controller返回值类型ActionResult
    将应用程序中的一些参数写到xml配置文件中
  • 原文地址:https://www.cnblogs.com/moumou0213/p/7149349.html
Copyright © 2011-2022 走看看