首先引用一个写的很好的博客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. Hadoop安全（2）——————UserGroupInformation

    UserGroupInformation保存hadoop用户及组信息 此类包装JAAS Subject,并提供确定用户的用户名和组的方法.它支持Windows,Unix和Kerberos登录模块.

  2. mybatis 架构

    官网地址:http://code.google.com/p/mybatis/ 版本:mybatis 3.2.3 生成工具:mybatis-generator-core-1.3.2-bundle.zip ...

  3. 洗礼灵魂，修炼python（4）--从简单案列中揭示常用内置函数以及数据类型

    上一篇说到print语句,print是可以打印任何类型到屏幕上,都有哪些类型呢? 整形(int) 长整型(long) 浮点型(float) 字符型(str) 布尔型(bool) 最常见的就这几种. 在 ...

  4. cors解决ajax请求跨域问题

    Access-Control-Allow-Origin: * 适用tomcat部署的项目 在web.xml里添加以下内容 <filter> <filter-name>CorsF ...

  5. nodejs后台集成富文本编辑器（ueditor）

    1 下载ueditor nodejs版本 2 复制public目录下面的文件 到项目静态资源public文件夹下 3 在项目根目录创建ueditor文件夹 要复制进来的内容为 4 在根目录的 uedi ...

  6. YYModel学习总结YYClassInfo（1）

    OC的run-time 机制,简直像是网络上的猫! 我在开发中很少用到,但是作为iOS开发 人家肯定会问这个东西,所以深入的学习了下. 对于 run-time的入手,YYModel的学习,简直让人美滋 ...

  7. 学习总结---SNAT和DNAT

    1.SNAT是结合源ip+源端口号变化的NAT功能. DNAT是将目的ip直接转换成私有的目的ip.(是否转换目的端口号?) 2.SNAT的应用场景:公司内部访问互联网时,使用公共的公网ip.从内到外 ...

  8. Django Form表单学习总结

    Form中添加自定义的验证:    1.对特定字段属性的验证;    2.包含多字段的验证. 先创建一个简单的Form: from django import forms class ContactF ...

  9. CSS滤镜效果

    使用 filter: blur() 生成毛玻璃效果 使用 filter: drop-shadow() 生成整体阴影效果 使用 filter: opacity() 生成透明度 blur生成阴影 通常我们 ...

  10. C语言第一次实验报告————PTA实验1.2.3内容

    一.PTA实验作业 题目1.温度转换 本题要求编写程序,计算华氏温度100°F对应的摄氏温度.计算公式:C=5×(F−32)/9,式中:C表示摄氏温度,F表示华氏温度,输出数据要求为整型. 1.实验代 ...