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