码迷,mamicode.com
首页 > 编程语言 > 详细

javascript 可多选的下拉框 multiselect 动态删除option值,动态添加option值,动态生成表格

时间:2017-11-06 20:15:37      阅读:342      评论:0      收藏:0      [点我收藏+]

标签:title   mini   lock   out   target   static   opera   body   isp   

首先引用一个写的很好的博客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 动态删除option值,动态添加option值,动态生成表格

标签:title   mini   lock   out   target   static   opera   body   isp   

原文地址:http://www.cnblogs.com/mianbaoshu/p/7794271.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!