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值，动态生成表格的更多相关文章
- javascript 可多选的下拉框 multiselect
首先引用一个写的很好的博客http://www.cnblogs.com/landeanfen/p/5013452.html 我使用的是bootstrap-multiselect,实现功能是 选择下拉框 ...
- jquery操作select下拉框的各种方法，获取选中项的值或文本，根据指定的值或文本选中select的option项等
简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...
- flask中单选、多选、下拉框的获取
1.单选: source = request.form.get('source') 2.多选: joy = request.form.getlist('joy') 或者 joy = re ...
- webdriver--单选、复选及下拉框的定位
单选radiobutton的操作 两种情况,一种是各个button元素的属性都有唯一定位值,可以直接用属性唯一值定位:另一种就是一组各方面属性值都一样的radiobutton,除了text,可以用组元 ...
- javascript实现可编辑的下拉框
曾经遇到过一个需求的情况是这样的,我们提供给用户的输入框的可选择项只能满足用户的大部分情况的选择,但是有时候会遇到一些用户想要输入的数据是下拉项中所没有的,而用户不希望改变下拉项为输入框模式,需要说如 ...
- 解决select下拉框禁用（设置disabled属性）,后台获取值为空
如果下拉框设置disabled属性后,提交表单到后台,后台获取的下拉框的值为空,以下有三种解决获取不到下拉框选项值的方法. 有下拉框html如:<select name="select ...
- DevExpress的下拉框控件LookUpEdit的使用、添加item选项值、修改默认显示值
场景 Winform控件-DevExpress18下载安装注册以及在VS中使用: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1 ...
- 前端组件：支持多选，支持选项筛选的下拉框选择器（基于Jquery和Bootstrap）
效果图一:多选 效果图二:选项筛选 最后奉献源码,复制出来直接可用 <!DOCTYPE html> <html> <head> <meta charset=& ...
- DropDownList单选与多选下拉框
一.单选DropDownList传值 1.添加界面的DropDownList显示值问题 (1)在方法内添加ViewData的方法: var ad = new UnitsRepository(); Vi ...
随机推荐
- 004.kubernets对于pod的简单管理
一 pod简介 1.1 介绍 Pod是K8s集群中所有业务类型的基础 Pod是在K8s集群中运行部署应用或服务的最小单元,它是可以支持多容器的. Pod的设计理念是支持多个容器在一个Pod中共享网络地 ...
- JQuery Ajax 请求参数 List 集合处理
引言 JQuery Ajax 发送请求参数一般都是基本类型,比如 String.int:那么,请求参数如果是 List 集合应该如何处理呢? 情况一:Aajx 发送 List 类型请求参数 举例如下: ...
- linux各文件夹的作用-(转自玉米疯收)
linux下的文件结构,看看每个文件夹都是干吗用的 /bin 二进制可执行命令 /dev 设备特殊文件 /etc 系统管理和配置文件 /etc/rc.d 启动的配置文件和脚本 /home 用户主目录的 ...
- Centos7.4 file '/grub/i386-pc/normal.mod' not found,实际为/boot下所有文件丢失
注:如果服务器特别重要,此方案慎用.如果没有其他方案解决,可以使用该方案 事件:搭建在云计算管理平台CAS上的 Centos7.4 虚拟机在一次断电后,启动虚拟机出现file '/grub/i386- ...
- Centos 7常见问题——SMBus Host Controller not enabled!
在使用虚拟机Centos7操作系统偶尔会遇到,重启开机过程中出现如下图情况,无法正常开机 出现这种情况的可能原因就是你在虚拟机中添加了网卡或硬盘,还有给内存添加了容量之类就会导致开机有这种报错 解决方 ...
- ffmpeg安装之mac安装
转发自白狼栈:查看原文 关于ffmpeg的安装,有的人可能要折腾很久,甚至折腾一个礼拜,究其原因,基本都是编译安装惹的祸. 我们提供4种安装方式,最复杂的莫过于centos7上的编译安装. ffmpe ...
- [leetcode] 48. 旋转图像(Java)(模拟)
48. 旋转图像 模拟题,其实挺不喜欢做模拟题的... 其实这题一层一层的转就好了,外层转完里层再转,其实就是可重叠的子问题了. 转的时候呢,一个数一个数的转,一个数带动四个数.如图所示,2这个数应该 ...
- 短波红外（SWIR）相机camera
短波红外(SWIR)相机camera AVs Can't Drive Everywhere. Can TriEye's SWIR Camera Help? TriEye的短波红外(SWIR)摄像机能否 ...
- Minecraft类游戏地形生成机制
目录 前言 生成地形高度 生成生物群落 模拟雨水侵蚀.生成河流(未完) 生成洞穴.裂谷 生成植被 放置树木(Bezier曲线) 生成建筑 生成发展域(元胞自动机模型) 放置建筑(DFS) 连接道路(A ...
- 【VBA】显示所有隐藏的名称管理器中的名称
Excel提示这个 代码: Sub DisplayNames() Dim Na As Name For Each Na In ThisWorkbook.Names Na.Visible = True ...