javascript 可多选的下拉框 multiselect 动态删除option值，动态添加option值，动态生成表格
Posted yuandian43
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 可多选的下拉框 multiselect 动态删除option值，动态添加option值，动态生成表格相关的知识，希望对你有一定的参考价值。
首先引用一个写的很好的博客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>
以上是关于javascript 可多选的下拉框 multiselect 动态删除option值，动态添加option值，动态生成表格的主要内容，如果未能解决你的问题，请参考以下文章