javascript 可多选的下拉框 multiselect

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

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

选择下拉框中的某几项数据后，通过点击add按键，可以将数据动态的添加到一个table中；
移除掉下拉框中的这几项；
删除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的更多相关文章

javascript 可多选的下拉框 multiselect 动态删除option值，动态添加option值，动态生成表格
首先引用一个写的很好的博客http://www.cnblogs.com/landeanfen/p/5013452.html 我使用的是bootstrap-multiselect,实现功能是选择下拉框 ...
ligerui多选动态下拉框
今天下午要求做一个支持多选的,并且插件用ligerui的,当时有点小懵了,因为没用过ligerui啊!而且按照API的介绍,我做得也很好啊,可是为什么就是显示不出来?据说有位小神比较厉害,请教来之,两 ...
flask中单选、多选、下拉框的获取
1.单选: source = request.form.get('source') 2.多选: joy = request.form.getlist('joy') 或者 joy = re ...
webdriver--单选、复选及下拉框的定位
单选radiobutton的操作两种情况,一种是各个button元素的属性都有唯一定位值,可以直接用属性唯一值定位:另一种就是一组各方面属性值都一样的radiobutton,除了text,可以用组元 ...
javascript实现可编辑的下拉框
曾经遇到过一个需求的情况是这样的,我们提供给用户的输入框的可选择项只能满足用户的大部分情况的选择,但是有时候会遇到一些用户想要输入的数据是下拉项中所没有的,而用户不希望改变下拉项为输入框模式,需要说如 ...
前端组件：支持多选，支持选项筛选的下拉框选择器（基于Jquery和Bootstrap）
效果图一:多选效果图二:选项筛选最后奉献源码,复制出来直接可用 <!DOCTYPE html> <html> <head> <meta charset=& ...
DropDownList单选与多选下拉框
一.单选DropDownList传值 1.添加界面的DropDownList显示值问题 (1)在方法内添加ViewData的方法: var ad = new UnitsRepository(); Vi ...
下拉框的change事件
6.1,获取下拉框的值(html标签中没有onchange事件的) <script language="javascript"> $(document).ready(f ...
大型情感剧集Selenium：4_老中医教你(单/多/下拉框)选项定位 #华为云·寻找黑马程序员#
今天讲什么讲什么标题说了,讲selenium的单选.多选.下拉框选项定位.但其实这东西,没什么太多说的,又比较枯燥,那该怎么让这一集selenium的课程变得有趣呢?有请老中医,哈哈- 怎么样,这个 ...

随机推荐

转载 iOS拦截导航栏返回按钮事件的正确方式
原文链接:http://www.jianshu.com/p/25fd027916fa 当我们使用了系统的导航栏时,默认点击返回按钮是 pop 回上一个界面.但是在有时候,我们需要在点击导航栏的返回按钮 ...
E - 钱币兑换问题
在一个国家仅有1分,2分,3分硬币,将钱N兑换成硬币有很多种兑法.请你编程序计算出共有多少种兑法. Input每行只有一个正整数N,N小于32768. Output对应每个输入,输出兑换方 ...
Count(*), Count(1) 和Count(字段)的区别
1. count(1) and count(*) 当表的数据量大些时,对表作分析之后,使用count(1)还要比使用count(*)用时多了! 从执行计划来看,count(1)和count(*)的 ...
nodejs+express+mongoose无法获取数据库数据问题解决
通过mongoose与mongodb进行操作.而mongoose是通过model来创建mongodb中对应的collection的,这样你通过如下的代码: mongoose.model('User', ...
LeetCode-2 Keys Keyboard
package Classify.DP.Medium; import org.junit.jupiter.api.Test; /** Initially on a notepad only one c ...
ZOJ1315
代码先寄放这里 #include<cstdio> #include<cstdlib> #include<iostream> #include<cstring& ...
Python内置类型(2)——布尔运算
python中bool运算符按优先级顺序分别有or.and.not, 其中or.and为短路运算符 not先对表达式进行真值测试后再取反 not运算符值只有1个表达式,not先对表达式进行真值测试后再 ...
structs2的核心和工作原理
在学习struts2之前,首先我们要明白使用struts2的目的是什么?它能给我们带来什么样的好处? 设计目标 Struts设计的第一目标就是使MVC模式应用于web程序设计.在这儿MVC模式的 ...
设置MySQL最大连接数
<pre name="code" class="sql">在使用MySQL数据库的时候,经常会遇到这么一个问题,就是"Can not co ...
C#生成Code128码
using System; using System.Collections.Generic; using System.Data; using System.Drawing; namespace C ...

javascript 可多选的下拉框 multiselect

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

HTML Code

Javascript Code

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

随机推荐

热门专题