首先引用一个写的很好的博客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. Vue2.0 探索之路——生命周期和钩子函数

    beforecreate :可以在这加个loading事件 created :在这结束loading,还做一些初始化,实现函数自执行 mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些 ...

  2. JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化

    前言:之前发表过一篇  JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有) ,收到很多园友的反馈,当然也包括很多诟病,因为上篇只是将功能实现了,很多细节都没有处理 ...

  3. c++builder中 扩展c++的关键字 ： _published _automated Get/Set指令 _fastcall

    C++Builder为C++增加了许多关键字,以适应其快速应用开发(RAD)环境.包括关键字和Get/Set指令. 1._published类似publich权限范围,_published像publi ...

  4. 基于Quartz实现简单的定时发送邮件

    一.什么是Quartz Quartz 是一个轻量级任务调度框架,只需要做些简单的配置就可以使用:它可以支持持久化的任务存储,即使是任务中断或服务重启后,仍可以继续运行.Quartz既可以做为独立的应用 ...

  5. java数据库编程之数据库的设计

    第一章:数据库的设计 1.1:为什么需要规范数据库的设计 1.1.1:什么是数据库设计 数据库设计就是将数据中的数据实体及这些数据实体之间的关系,进行规范和结构的过程. 1.1.2:数据库设计非常重要 ...

  6. jvm中的垃圾回收器

    HotSpot JVM收集器 上面有7中收集器,分为两块,上面为新生代收集器,下面是老年代收集器.如果两个收集器之间存在连线,就说明它们可以搭配使用.Serial(串行GC)收集器 Serial收集器 ...

  7. struts2中的结果视图类型

    实际上在Struts2框架中,一个完整的结果视图配置文件应该是: <action name="Action名称" class="Action类路径" me ...

  8. Java面向对象 IO （四）

     Java面向对象  IO  (四) 知识概要:                 (1)打印流 (2)序列流 SequenceInputStream (3)ObjectInputStream与Ob ...

  9. 详解面向对象编程——JavaScriptOOP

        前  言 絮叨絮叨 学习了JS之后,不知道大家觉得怎们样呢? 今天我们就来讲一下JS中最重要的一个环节,JavaScript中的面向对象编程OOP,这里的东西有点难,也有点绕. 可是! 不要灰 ...

  10. Delphi实现电脑端微信图片文件解密

    电脑端微信收到图片后是存在了“C:\Users\系统用户名\Documents\WeChat Files\微信帐号\Data”目录下的,但文件不能直接使用图片浏览器打开的,因为做了一些加密,之前有个朋 ...