首先引用一个写的很好的博客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. call()和apply()的作用

    call( )和apply( )都是为了改变某个函数运行时的上下文而存在的.换句话说是改变函数体内部this的指向 他们的区别就是call()方法接受的是若干个参数的列表,而apply()方法接受的是 ...

  2. 封装好的图片滑动框架(AndroidImageSlider)

    前言 广告轮播条的重要性不言而喻.在很多类型app中出场率都很高. 今天给大家介绍一个轮播图开源项目,这个项目把轮播图需要的ViewPager跟计时器做了封装,使用极其方便,支持gradle在线依赖. ...

  3. Minutes和TotalMinutes的区别

    今天测试提了一个BUG,说是消息提醒的时机不对,设置的提前2小时,还没到就提醒了. 看了下代码 (m.ExpectReceiveTime - DateTime.Now).Minutes < (p ...

  4. Hive简记

    在大数据工作中难免遇到数据仓库(OLAP)架构,以及通过Hive SQL简化分布式计算的场景.所以想通过这篇博客对Hive使用有一个大致总结,希望道友多多指教! 摘要: 1.Hive安装 2.Hive ...

  5. Ansible(二) - 配置及命令简介

    Ⅰ. Ansible Inventory Hosts文件配置 # mkdir /etc/ansible # touch /etc/ansible/hosts # cat /etc/hosts 127. ...

  6. Laravel框架使用查询构造器实现CURD

    一.什么是查询构造器? ①Laravel 查询构造器(query Builder)提供方便,流畅的接口,用来建立及执行数据库查找语法 ②使用PDO参数绑定,以保护应用程序免于SQL注入因此传入的参数不 ...

  7. es6零基础学习之构建脚本（二）

    编译器打开你的es6项目 首先:创建我们的第一个脚本,tasks/util/args.js      在文件里面要先引入一个包,处理命令行参数 import yargs from 'yargs'; / ...

  8. 动态IP解析

    本文介绍两种方便获取主机动态IP的方式(DDNS,IP报告网页),并给出相应的代码实现. shell脚本获取本机IP,执行上传操作和更新DNS操作.定期执行通过crontab或者systemd等服务. ...

  9. Color Blender---在线渐变色带生成器

       Color Blender是一个很有用的在线渐变色带生成器,它可以在两种颜色之间,自动生成过渡色,对网页设计师来说是一个不错的颜色调配工具.   Color Blender的使用方法很简单,你只 ...

  10. EasyUI Tree 树 ——实现多级别菜单的展示，以及与后台数据的交互

    一 要引入的js css库 <link type="text/css" href="css/base.css" rel="stylesheet& ...