首先引用一个写的很好的博客http://www.cnblogs.com/landeanfen/p/5013452.html

我使用的是bootstrap-multiselect，实现功能是

  1. 选择下拉框中的某几项数据后，通过点击add按键，可以将数据动态的添加到一个table中；
  2. 移除掉下拉框中的这几项；
  3. 删除table中的某行数据，对应的下拉框中会再添加这些值。

bootstrap-multiselect源码主页：https://github.com/davidstutz/bootstrap-multiselect

bootstrap-multiselect文档以及Demo：http://davidstutz.github.io/bootstrap-multiselect/

HTML Code

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <link rel="stylesheet" href="/static/thirdpart/zui/css/zui.min.css">

     <link rel="stylesheet" href="/static/thirdpart/zui/css/zui-theme.css" />

     <link rel="stylesheet" href="/static/thirdpart/zui/lib/datatable/zui.datatable.min.css">

     <script src="/static/thirdpart/zui/lib/jquery/jquery.js"></script>

     <script src="/static/thirdpart/zui/js/zui.js"></script>

     <script src="/static/thirdpart/zui/lib/datatable/zui.datatable.min.js"></script>

     <script type="text/javascript" src="/static/thirdpart/bootstrap/js/bootstrap-multiselect.js"></script>

     <link rel="stylesheet" href="/static/thirdpart/bootstrap/css/bootstrap-multiselect.css" type="text/css">

     <link href="/static/thirdpart/bootstrap/css/multiple-select.css" rel="stylesheet">

     <script src="/static/thirdpart/bootstrap/js/multiple-select.js"></script>

 </head>

 <body>

 <div class="modal" id="assign_servers" style="display: block; position: static;">

     <div class="modal-dialog " >

         <div class="modal-content">

             <div class="modal-header">

                 <h4 class="modal-title">Assign Servers</h4>

             </div>

           <div class="modal-body" id="div1">

                 <form class="form-horizontal" id=regular_application  >

                       <div class="form-group" id="cloud_div" >

                             <label class="col-xs-1"> Cloud</label>

                             <div class="col-xs-3" id='cloud_ip_div'>

                                   <select   multiple="multiple"  class="form-control" id="cloud_server_ip" style="background-color:'white';display:inline">

                                     <option value="0">cloud_server0</option>

                                     <option value="1">cloud_server1</option>

                                     <option value="2">cloud_server2</option>

                                     <option value="3">cloud_server3</option>

                                     <option value="4">cloud_server4</option>

                                     <option value="5">cloud_server5</option>

                                 </select>

                                 <script type="text/javascript">

                                     $(document).ready(function() {

                                         $('#cloud_server_ip').multiselect({

                                             includeSelectAllOption: true,

                                             buttonWidth: '130px',

                                                 maxHeight: 150,

                                             //enableFiltering: true

                                         });

                                     });

                              </script>

                          </div>

                          <div  class="col-xs-1 ">

                              <input type="button"  name="add_cloud_name" value="ADD" class="btn btn-primary" id="add_cloud_data" ><!--  ADD</input> -->

                          </div>

                         <label class="col-xs-2 "> Device</label>

                           <div class="col-xs-3" id='device_ip_div'>

                               <select  multiple="multiple" class="form-control" name="device_server_ip" id="device_server_ip" style="background-color:'white';display:inline">

                                    <option value="0">device_server0</option>

                                    <option value="1">device_server1</option>

                                    <option value="2">device_server2</option>

                                    <option value="3">device_server3</option>

                                    <option value="4">device_server4</option>

                                    <option value="5">device_server5</option>

                             </select>

                               <script type="text/javascript">

                                 $(document).ready(function() {

                                     $('#device_server_ip').multiselect({

                                         includeSelectAllOption: true,

                                         buttonWidth: '130px',

                                             maxHeight: 150,

                                         //enableFiltering: true

                                     });

                                 });

                              </script>

                         </div>

                         <div  class="col-xs-1 ">

                              <input type="button"  name="add_device_name" value=" ADD" class="btn btn-primary" id="add_device_data" > <!-- ADD</button> -->

                         </div>

                      </div>

             </form>

              <form id="server_form" method = 'post' >

                  <div id='table_server'style="overflow-y: auto; height: 300px;">

                     <table  class="table table-hover "  id="server_table"  style="margin-top:10px">

                         <thead>

                                 <tr>

                                     <th scope="col" >Server Type</th>

                                 <th scope="col" >Host Name</th>

                                 <th scope="col" >Operation</th>

                              </tr>

                         </thead>

                         <tbody>

                         </tbody>

                     </table>

                 </div>

                </form>

            </div>

         </div>

    </div>

 </div>

 </body>

 </html>

Javascript Code

 <script>

 //add server data

 $(function(){

      $('#add_cloud_data').click(function(){

        if ($('#cloud_server_ip').val()){

                add_servers('Cloud','cloud_server_ip');

             $(".table_data").css("background-color","#f2f2f2");

             $(".table_data").css("border","0");

             $(".table_data").mouseover(function(){

             $(".table_data").css("background-color","#eceff1");});

             $(".table_data").mouseout(function(){

             $(".table_data").css("background-color","#f2f2f2");});

        }

        });

 });

 $(function(){

      $('#add_device_data').click(function(){

        if ($('#device_server_ip').val()){

            add_servers('Device','device_server_ip');

             $(".table_data").css("background-color","#f2f2f2");

             $(".table_data").css("border","0");

             $(".table_data").mouseover(function(){

             $(".table_data").css("background-color","#eceff1");});

             $(".table_data").mouseout(function(){

             $(".table_data").css("background-color","#f2f2f2");});

        }

       });

 });

 function add_servers(server_type,server_ip){

     len=$('#'+server_ip).val().length

     for(var i=0;i<len;i++){

         var server_value=$('#'+server_ip).val()[0]

         var server_text=$('#'+server_ip).find("option:selected")[0].innerHTML

         add_single_server(server_type,server_ip,server_value,server_text);

        $('option[value="'+server_value+'"]', $('#'+server_ip)).remove();

         }

     $('#'+server_ip).multiselect('rebuild');

 }    

 function add_single_server(server_type,server_ip,server_value,server_text){

     var tr = document.createElement("tr");

     tr.setAttribute('class','table_data');

     //servertype    input

     var servertypeVal = server_type;

     var servertypeTd = document.createElement("td");

     tr.appendChild(servertypeTd);

     var input_box = document.createElement('input');

     input_box.setAttribute('value',servertypeVal);

     input_box.setAttribute('name',"table_servertype");

     input_box.setAttribute('style','width:70px');

     input_box.setAttribute('type','text');

     input_box.setAttribute('readonly','readonly');

     input_box.setAttribute('class','table_data');

     servertypeTd.appendChild(input_box); 

     //serverip    input

     var serveripVal =server_text;

     var serverip_id=server_value;

     var serveripTd = document.createElement("td");

     tr.appendChild(serveripTd);

     var input_box = document.createElement('input');

     input_box.setAttribute('value',serveripVal);

     input_box.setAttribute('title',serverip_id);

     input_box.setAttribute('id',"table_hostname");

     input_box.setAttribute('name',"table_hostname");

     input_box.setAttribute('style','width:300px');

     input_box.setAttribute('type','text');

     input_box.setAttribute('readonly','readonly');

     input_box.setAttribute('class','table_data');

     serveripTd.appendChild(input_box); 

      // delete operate

      var delTd = document.createElement('td');

      tr.appendChild(delTd);

      var btnDel = document.createElement('input');

      btnDel.setAttribute('type','button');

      btnDel.setAttribute('value','Delete');

      btnDel.onclick=function(){

          if(confirm("Do you want to delete this line?")){

            //btnDel - td - tr - tbody . removeChild(tr)

                $("#"+server_ip).append("<option value="+serverip_id+">"+serveripVal+"</option>");

                this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);

                $('#'+server_ip).multiselect('rebuild');

          }

      }

      delTd.appendChild(btnDel); 

      document.getElementById("server_table")

          .getElementsByTagName("tbody")[0]

          .appendChild(tr);

 }

 </script>

javascript 可多选的下拉框 multiselect的更多相关文章

  1. javascript 可多选的下拉框 multiselect 动态删除option值，动态添加option值，动态生成表格

    首先引用一个写的很好的博客http://www.cnblogs.com/landeanfen/p/5013452.html 我使用的是bootstrap-multiselect,实现功能是 选择下拉框 ...

  2. ligerui多选动态下拉框

    今天下午要求做一个支持多选的,并且插件用ligerui的,当时有点小懵了,因为没用过ligerui啊!而且按照API的介绍,我做得也很好啊,可是为什么就是显示不出来?据说有位小神比较厉害,请教来之,两 ...

  3. flask中单选、多选、下拉框的获取

    1.单选: source = request.form.get('source') 2.多选:   joy = request.form.getlist('joy')    或者   joy = re ...

  4. webdriver--单选、复选及下拉框的定位

    单选radiobutton的操作 两种情况,一种是各个button元素的属性都有唯一定位值,可以直接用属性唯一值定位:另一种就是一组各方面属性值都一样的radiobutton,除了text,可以用组元 ...

  5. javascript实现可编辑的下拉框

    曾经遇到过一个需求的情况是这样的,我们提供给用户的输入框的可选择项只能满足用户的大部分情况的选择,但是有时候会遇到一些用户想要输入的数据是下拉项中所没有的,而用户不希望改变下拉项为输入框模式,需要说如 ...

  6. 前端组件：支持多选，支持选项筛选的下拉框选择器（基于Jquery和Bootstrap）

    效果图一:多选 效果图二:选项筛选 最后奉献源码,复制出来直接可用 <!DOCTYPE html> <html> <head> <meta charset=& ...

  7. DropDownList单选与多选下拉框

    一.单选DropDownList传值 1.添加界面的DropDownList显示值问题 (1)在方法内添加ViewData的方法: var ad = new UnitsRepository(); Vi ...

  8. 下拉框的change事件

    6.1,获取下拉框的值(html标签中没有onchange事件的) <script language="javascript"> $(document).ready(f ...

  9. 大型情感剧集Selenium：4_老中医教你(单/多/下拉框)选项定位 #华为云·寻找黑马程序员#

    今天讲什么 讲什么标题说了,讲selenium的单选.多选.下拉框选项定位.但其实这东西,没什么太多说的,又比较枯燥,那该怎么让这一集selenium的课程变得有趣呢?有请老中医,哈哈- 怎么样,这个 ...

随机推荐

  1. oracle 例外

    一.例外分类oracle将例外分为预定义例外.非预定义例外和自定义例外三种.1).预定义例外用于处理常见的oracle错误.2).非预定义例外用于处理预定义例外不能处理的例外.3).自定义例外用于处理 ...

  2. NOIP2017SummerTraining0726

    三道比较简单的题,还以为是八校考试的题目,但是并不是,无语了,第三题其实看了挺久的,一看到图,就想到了二分图,网络流之类的算法,但是尽力往这个方向想了好久都没什么思路, 最后从简单入手,然而没什么结果 ...

  3. P1045

    问题 A: P1045 时间限制: 1 Sec  内存限制: 128 MB提交: 145  解决: 127[提交][状态][讨论版] 题目描述 题目很简单,给出N个数字,不改变它们的相对位置,在中间加 ...

  4. DOM中的parentNode总结

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 使用jquery.form.js文件进行文件上传

    本想着文件上传是一件挺简单的事,不过是获取文件地址保存到服务器而已,然而事实并非如此. 我信心满满的写下input type="file",alert input 的value,打 ...

  6. IBatis.Net 老技术新研究

    我们现在用的数据访问组件封装了IBatis.Net框架,提供了标准的数据访问接口和服务.正好总结一下老技术IBatis.Net在进行实际的数据访问开发之前,我们先了解一下:IBatis.Net中几个重 ...

  7. 我的three.js学习记录（二）

    通过上一篇文章我的three.js学习记录(一)基本上是入门了three.js,但是这不够3D,这次我希望能把之前做的demo弄出来,然后通过例子来分析操作步骤. 1. 示例 上图是之前做的一个dem ...

  8. 【转载】Retina屏的移动设备如何实现真正1px的线？

    文章转载自 酷勤网 http://www.kuqin.com/ 原文链接:http://www.kuqin.com/shuoit/20150530/346322.html 原文摘要:前些日子总被人问起 ...

  9. 怎么用SQL语句备份和恢复数据库?

    BACKUP DATABASE "mydb" TO DISK ='C:\mybak.db' with init RESTORE DATABASE "mydb" ...

  10. layer.msg 添加在Ajax之前 显示进度条。

    一.使用方法:1)必须先引入jQuery1.8或以上版本 <script src="jQuery的路径"></script> <script src= ...