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