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 ...
随机推荐
- 3*060-A 日志记录
电路检修遇到的问题: 今天在检修一块3060-A电路板时 发现 3.3V烫 但是3.3V路上的电容并没有短路 于是拆单片机 拆RS232EN 拆 FM24V 最后发现 原来是 1117 ...
- C++ STL 里为什么不维护一个 size 成员变量？
回答: 为什么 GCC 里要把 list::size() 的复杂度搞成 O(N)? 一通搜索后终于看到有这样的讨论:关于 list::splice() 函数. list 是链表结构,它的优势就在于可以 ...
- xml 解析之 JDOM解析
JDOM 是一种使用 XML 的独特 Java 工具包,用于快速开发 XML 应用程序.JDOM 是一个开源项目,它基于树形结构,利用纯 Java 的技术对 XML 文档实现解析.生成.序列化及多种操 ...
- JMicro微服务Hello World
概述 JMicro是本人开发的基于Java实现的微服务框架,前两天发布0.0.3正式版本,并已发布到maven中央仓库. 项目源码github:https://github.com/mynewworl ...
- git&nodejs安装教程
git https://www.cnblogs.com/ximiaomiao/p/7140456.html nodejs https://jingyan.baidu.com/article/e7505 ...
- 【Azure 应用服务】由 Azure Functions runtime is unreachable 的错误消息推导出 ASYNC(异步）和 SYNC(同步）混用而引起ThreadPool耗尽问题
问题描述 在Azure Function Portal上显示: Azure Functions runtime is unreachable,引起的结果是Function App目前不工作,但是此前一 ...
- YOLO v1到YOLO v4（下）
YOLO v1到YOLO v4(下) Faster YOLO使用的是GoogleLeNet,比VGG-16快,YOLO完成一次前向过程只用8.52 billion 运算,而VGG-16要30.69bi ...
- A100 Tensor核心可加速HPC
A100 Tensor核心可加速HPC HPC应用程序的性能需求正在迅速增长.众多科学研究领域的许多应用程序都依赖于双精度(FP64)计算. 为了满足HPC计算快速增长的计算需求,A100 GPU支持 ...
- 操作系统-gcc编译器驱动程序
gcc编译器驱动程序,读取x.c文件,翻译成可执行目标文件x 1.预处理阶段 预处理器(cpp)将x.c(源程序,文本文件)中的#等直接插入程序文本中,成为另一个c程序x.i(文本文件) 2.编译阶段 ...
- 编译原理-NFA转化成DFA
1.假定NFA M=<S,∑,f,S0,F> 对M的状态转换图进行以下改造: ①引进新的初态结点X和终态结点Y, X,Y∈S, 从X到S0中的任意结点连一条ε箭弧, ...