首先引用一个写的很好的博客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
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>
时间： 2024-10-29 19:10:29