首先引用一个写的很好的博客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

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <link rel="stylesheet" href="/static/thirdpart/zui/css/zui.min.css">
  6.      <link rel="stylesheet" href="/static/thirdpart/zui/css/zui-theme.css" />
  7.      <link rel="stylesheet" href="/static/thirdpart/zui/lib/datatable/zui.datatable.min.css">
  8.      <script src="/static/thirdpart/zui/lib/jquery/jquery.js"></script>
  9.      <script src="/static/thirdpart/zui/js/zui.js"></script>
  10.      <script src="/static/thirdpart/zui/lib/datatable/zui.datatable.min.js"></script>
  11.      <script type="text/javascript" src="/static/thirdpart/bootstrap/js/bootstrap-multiselect.js"></script>
  12.      <link rel="stylesheet" href="/static/thirdpart/bootstrap/css/bootstrap-multiselect.css" type="text/css">
  13.      <link href="/static/thirdpart/bootstrap/css/multiple-select.css" rel="stylesheet">
  14.      <script src="/static/thirdpart/bootstrap/js/multiple-select.js"></script>
  15.  </head>
  16.  
  17.  <body>
  18.  <div class="modal" id="assign_servers" style="display: block; position: static;">
  19.      <div class="modal-dialog " >
  20.          <div class="modal-content">
  21.              <div class="modal-header">
  22.                  <h4 class="modal-title">Assign Servers</h4>
  23.              </div>
  24.            <div class="modal-body" id="div1">
  25.                  <form class="form-horizontal" id=regular_application  >
  26.                        <div class="form-group" id="cloud_div" >
  27.                              <label class="col-xs-1"> Cloud</label>
  28.                              <div class="col-xs-3" id='cloud_ip_div'>
  29.                                    <select   multiple="multiple"  class="form-control" id="cloud_server_ip" style="background-color:'white';display:inline">
  30.                                      <option value="0">cloud_server0</option>
  31.                                      <option value="1">cloud_server1</option>
  32.                                      <option value="2">cloud_server2</option>
  33.                                      <option value="3">cloud_server3</option>
  34.                                      <option value="4">cloud_server4</option>
  35.                                      <option value="5">cloud_server5</option>
  36.                                  </select>
  37.                                  <script type="text/javascript">
  38.                                      $(document).ready(function() {
  39.                                          $('#cloud_server_ip').multiselect({
  40.                                              includeSelectAllOption: true,
  41.                                              buttonWidth: '130px',
  42.                                                  maxHeight: 150,
  43.                                              //enableFiltering: true
  44.                                          });
  45.                                      });
  46.                               </script>
  47.                           </div>
  48.                           <div  class="col-xs-1 ">
  49.                               <input type="button"  name="add_cloud_name" value="ADD" class="btn btn-primary" id="add_cloud_data" ><!--  ADD</input> -->
  50.                           </div>
  51.                          <label class="col-xs-2 "> Device</label>
  52.                            <div class="col-xs-3" id='device_ip_div'>
  53.                                <select  multiple="multiple" class="form-control" name="device_server_ip" id="device_server_ip" style="background-color:'white';display:inline">
  54.                                     <option value="0">device_server0</option>
  55.                                     <option value="1">device_server1</option>
  56.                                     <option value="2">device_server2</option>
  57.                                     <option value="3">device_server3</option>
  58.                                     <option value="4">device_server4</option>
  59.                                     <option value="5">device_server5</option>
  60.                              </select>
  61.                                <script type="text/javascript">
  62.                                  $(document).ready(function() {
  63.                                      $('#device_server_ip').multiselect({
  64.                                          includeSelectAllOption: true,
  65.                                          buttonWidth: '130px',
  66.                                              maxHeight: 150,
  67.                                          //enableFiltering: true
  68.                                      });
  69.                                  });
  70.                               </script>
  71.  
  72.                          </div>
  73.                          <div  class="col-xs-1 ">
  74.                               <input type="button"  name="add_device_name" value=" ADD" class="btn btn-primary" id="add_device_data" > <!-- ADD</button> -->
  75.                          </div>
  76.                       </div>
  77.              </form>
  78.               <form id="server_form" method = 'post' >
  79.                   <div id='table_server'style="overflow-y: auto; height: 300px;">
  80.                      <table  class="table table-hover "  id="server_table"  style="margin-top:10px">
  81.                          <thead>
  82.                                  <tr>
  83.                                      <th scope="col" >Server Type</th>
  84.                                  <th scope="col" >Host Name</th>
  85.                                  <th scope="col" >Operation</th>
  86.                               </tr>
  87.                          </thead>
  88.                          <tbody>
  89.                          </tbody>
  90.                      </table>
  91.                  </div>
  92.                 </form>
  93.             </div>
  94.          </div>
  95.     </div>
  96.  </div>
  97.  </body>
  98.  </html>

Javascript Code

  1.  <script>
  2.  //add server data
  3.  $(function(){
  4.       $('#add_cloud_data').click(function(){
  5.         if ($('#cloud_server_ip').val()){
  6.                 add_servers('Cloud','cloud_server_ip');
  7.              $(".table_data").css("background-color","#f2f2f2");
  8.              $(".table_data").css("border","0");
  9.              $(".table_data").mouseover(function(){
  10.              $(".table_data").css("background-color","#eceff1");});
  11.              $(".table_data").mouseout(function(){
  12.              $(".table_data").css("background-color","#f2f2f2");});
  13.         }
  14.         });
  15.  });
  16.  
  17.  $(function(){
  18.       $('#add_device_data').click(function(){
  19.         if ($('#device_server_ip').val()){
  20.             add_servers('Device','device_server_ip');
  21.              $(".table_data").css("background-color","#f2f2f2");
  22.              $(".table_data").css("border","0");
  23.              $(".table_data").mouseover(function(){
  24.              $(".table_data").css("background-color","#eceff1");});
  25.              $(".table_data").mouseout(function(){
  26.              $(".table_data").css("background-color","#f2f2f2");});
  27.         }
  28.        });
  29.  });
  30.  
  31.  function add_servers(server_type,server_ip){
  32.      len=$('#'+server_ip).val().length
  33.      for(var i=0;i<len;i++){
  34.          var server_value=$('#'+server_ip).val()[0]
  35.          var server_text=$('#'+server_ip).find("option:selected")[0].innerHTML
  36.          add_single_server(server_type,server_ip,server_value,server_text);
  37.         $('option[value="'+server_value+'"]', $('#'+server_ip)).remove();
  38.          }
  39.      $('#'+server_ip).multiselect('rebuild');
  40.  }    
  41.  
  42.  function add_single_server(server_type,server_ip,server_value,server_text){
  43.      var tr = document.createElement("tr");
  44.      tr.setAttribute('class','table_data');
  45.  
  46.      //servertype    input
  47.      var servertypeVal = server_type;
  48.      var servertypeTd = document.createElement("td");
  49.      tr.appendChild(servertypeTd);
  50.      var input_box = document.createElement('input');
  51.      input_box.setAttribute('value',servertypeVal);
  52.      input_box.setAttribute('name',"table_servertype");
  53.      input_box.setAttribute('style','width:70px');
  54.      input_box.setAttribute('type','text');
  55.      input_box.setAttribute('readonly','readonly');
  56.      input_box.setAttribute('class','table_data');
  57.      servertypeTd.appendChild(input_box); 
  58.  
  59.      //serverip    input
  60.      var serveripVal =server_text;
  61.      var serverip_id=server_value;
  62.      var serveripTd = document.createElement("td");
  63.      tr.appendChild(serveripTd);
  64.      var input_box = document.createElement('input');
  65.      input_box.setAttribute('value',serveripVal);
  66.      input_box.setAttribute('title',serverip_id);
  67.      input_box.setAttribute('id',"table_hostname");
  68.      input_box.setAttribute('name',"table_hostname");
  69.      input_box.setAttribute('style','width:300px');
  70.      input_box.setAttribute('type','text');
  71.      input_box.setAttribute('readonly','readonly');
  72.      input_box.setAttribute('class','table_data');
  73.      serveripTd.appendChild(input_box); 
  74.  
  75.       // delete operate
  76.       var delTd = document.createElement('td');
  77.       tr.appendChild(delTd);
  78.       var btnDel = document.createElement('input');
  79.       btnDel.setAttribute('type','button');
  80.       btnDel.setAttribute('value','Delete');
  81.       btnDel.onclick=function(){
  82.           if(confirm("Do you want to delete this line?")){
  83.             //btnDel - td - tr - tbody . removeChild(tr)
  84.                 $("#"+server_ip).append("<option value="+serverip_id+">"+serveripVal+"</option>");
  85.                 this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
  86.                 $('#'+server_ip).multiselect('rebuild');
  87.           }
  88.       }
  89.       delTd.appendChild(btnDel); 
  90.  
  91.       document.getElementById("server_table")
  92.           .getElementsByTagName("tbody")[0]
  93.           .appendChild(tr);
  94.  }
  95.  </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. oracle11g 体系结构详解

    1.oracle内存由SGA+PGA所构成 2.oracle数据库体系结构数据库的体系结构是指数据库的组成.工作过程与原理,以及数据在数据库中的组织与管理机制. oracle工作原理: 1).在数据库 ...

  2. oracle sql 树操作

    语法:select-start with-connect by-prior 主要有两点 1)prior放在子节点端,则表示扫描树是以start with指定的节点作为根节点从上往下扫描.可能对应一个或 ...

  3. MTVERIFY

    MTVERIFY宏即适用于GUI程序也适用于console程序,这个宏内部其实是记录并解释了Win32 GetLastError()的结果.如果Win32函数失败,MTVERIFY()会打印出一段简短 ...

  4. C语言定义从URL中获取键值的接口

    环境:centos7下,对客户端http请求进行解析,来获取有效键值(包括汉字). 头文件 /* 这是一份关于从Http请求信息中提取键值的接口声明的头文件 */ #ifndef _HEAD_H_ # ...

  5. 怎样学好哲学（lucas+费马小定理）

    怎样学习哲学 时间限制: 1 Sec  内存限制: 128 MB提交: 97  解决: 27[提交][状态][讨论版] 题目描述 OI大师抖儿在夺得银牌之后,顺利保送pku.这一天,抖儿问长者:&qu ...

  6. vue学习之指令简写以及事件笔记

    1.v-bind:××× 可简写为 :××× 2.v-on:××× 可简写为 @××× 例: v-on:click 可简写为 @click (官网文档介绍) 3.vue处理事件 <!-- 阻止单 ...

  7. 学习如何看懂SQL Server执行计划——基本知识篇

    一.基本概念 1.数据的读取 页(page)是SQL SERVER可以读写的最小I/O单位.即使只需访问一行,也要把整个页加载到缓存之中,再从缓存中读取数据.物理读取是从磁盘上读取,逻辑读取是从缓存中 ...

  8. Entity Framework Code First实现乐观并发

    Entity Framework Code First实现乐观并发 不定时更新翻译系列,此系列更新毫无时间规律,文笔菜翻译菜求各位看官老爷们轻喷,如觉得我翻译有问题请挪步原博客地址 本博文翻译自: h ...

  9. open() close()

    open() 方法可以查找一个已经存在或者新建的浏览器窗口. 语法: window.open([URL], [窗口名称], [参数字符串]) 每个参数必须用引号 参数说明: URL:可选参数,在窗口中 ...

  10. Unity 使用 陀螺仪 实现 《王者荣耀》 登入界面 背景动态效果

    在 <王者荣耀> 登入界面 左右上下晃动手机(有些手机不支持)可以看到背景在变化 我使用的是iPhone SE 效果如下: 对比两张图片的左下角 可以看到差异 至于为什么要这么做: 1.使 ...