html如何做下拉的可多选的复选框列表

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html如何做下拉的可多选的复选框列表相关的知识，希望对你有一定的参考价值。

下面是我做的一个范例，你可以参考一下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自定义表单1 - powered by dedecms</title>
<link href="img/nspage.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="../include/dedeajax2.js"></script>
</head>
<body>

<div class="main mceneter">
<div class="toplogo">
<div class="logo">
<a href="/"><img src="/templets/default/images/logo.gif" /></a>
</div>
<div class="title">
<a href='diy.php?action=list&diyid=1'>自定义表单1</a> > 发布信息
</div>
</div>
<div class="cmain">
<div class="ctitle">
<h1>自定义表单1发布</h1>
<span></span>
</div>
<div class="cbox mceneter">
<div class="maplist">
<br />
<form action="/plus/diy.php" enctype="multipart/form-data" method="post">
<input type="hidden" name="action" value="post" />
<input type="hidden" name="diyid" value="1" />
<input type="hidden" name="do" value="2" />
<table style="width:97%;" cellpadding="0" cellspacing="1">
<tr>
<td align="right" valign="top">范例：</td>
<td><select name='fl' style='width:150px'><option value='男'>男</option>
<option value='女'>女</option>
<option value='人妖'>人妖</option>
</select>
</td>
</tr>
<input type="hidden" name="dede_fields" value="fl,select" />
<input type="hidden" name="dede_fieldshash" value="db5f139909450665fd4b641fff161416" /></table>
<div align='center' style='height:30px;padding-top:10px;'>
<input type="submit" name="submit" value="提 交" class='coolbg' />

<input type="reset" name="reset" value="重 置" class='coolbg' />
</div>
</form>
</div>
</div>
</div>
</div>

<div class="copyright mceneter">
Powered by <a href="http://www.dedecms.com" target="_blank">DedeCMS</a> © 2004-2009 <a href="http://www.desdev.cn" target="_blank">DesDev</a> Inc.
</div>

</body>
</html> 参考技术A <html>
<head>
<title>在下拉列表框中使用复选框</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<style>
body,tdfont-size:12px;color:#000000;
.checkboxwidth:15px;height:15px;
.cked
margin:1px;padding:2px;width:98%;display:block;background-color:highlight;color:highlighttext;

.nock
margin:1px;padding:2px;width:98%;display:block;

</style>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!--
function HtmlEncode(text)
return text.replace(/&/g, '&amp').replace(/\\"/g, '"').replace(/</g, '&lt;').replace(/>/g, '&gt;');

function _checkbox(name,str,defv)
var arr=str.split("^");
var ck="",bc="";
for(var i=0;i<arr.length;i++)
var thisarr=arr[i].split("@=");
if (thisarr[0].length>0)
var t=(thisarr.length==2)?thisarr[0]:arr[i];
var v=(thisarr.length==2)?thisarr[1]:arr[i];
if((","+HtmlEncode(defv).toLowerCase()+",").replace(/ ,/g, ',').indexOf(","+v+",")!=-1)ck=" checked";cls="cked";
elseck="";cls="nock";
var thisstr="<label class=\\""+cls+"\\" for=\\"i_"+name+"_"+i+"\\" id=\\"l_"+name+"_"+i+"\\">";
thisstr+="<input class=\\"checkbox\\" onpropertychange=\\"document.getElementById('l_"+name+"_"+i+"').className=(document.getElementById('i_"+name+"_"+i+"').checked)?'cked':'nock';\\" onclick=\\"document.getElementById('l_"+name+"_"+i+"').className=(document.getElementById('i_"+name+"_"+i+"').checked)?'cked':'nock';\\" type=\\"checkbox\\""+ck+" name=\\""+name+"\\" id=\\"i_"+name+"_"+i+"\\" value=\\""+HtmlEncode(v)+"\\" \\/> ";
thisstr+=HtmlEncode(t)+"</label>";
document.write(thisstr);



function _getv(o)
var allvalue="";
if(typeof(o)=="undefined")return "";
if (typeof(o.length)=="undefined")
if(o.checked)return o.value+ ",";elsereturn "";

for(var i=0;i<o.length;i++)
if(o[i].checked)
allvalue +=o[i].value+",";


return allvalue;

function _setv(o,defv)
var allvalue=(","+HtmlEncode(defv).toLowerCase()+",").replace(/ ,/g, ',');
for(var i=0;i<o.length;i++)
var v = o[i].value;
o[i].checked=(allvalue.indexOf(","+v+",")!=-1)

return allvalue;

function _sl(o,b)
for(var i=0;i<o.length;i++)
o[i].checked = b
//if(o[i].checked!=b)o[i].click();


//-->
</SCRIPT>
<form method="post" name="myform" action="">
  <table border="0" width="200">
    <tr>
      <td><div style="width:180px;height:150px;overflow:auto;border: 2px inset #FFFFFF;">
<SCRIPT LANGUAGE="JavaScript">
<!--
_checkbox("city","北京^河北^黑龙江^河南^江西^辽宁^宁夏^四川^天津^浙江^香港","北京,山东")
//-->
</SCRIPT></div>
 </td>
    </tr>
    <tr>
      <td>
<button onclick='_sl(document.myform.city,true);'>全选</button>
<button onclick='_sl(document.myform.city,false);'>全不选</button>
<button onclick='_setv(document.myform.city,"甘肃,广东");'>set值</button>
<button onclick='alert(_getv(document.myform.city));'>get值</button>
 </td>
    </tr>
    <tr>
      <td><div style="width:180px;height:120px;overflow:auto;border: 2px inset #FFFFFF;">
<SCRIPT LANGUAGE="JavaScript">
<!--
_checkbox("WebSite","Google.com@=http://www.google.com^Blueidea.com@=/","/")
//-->
</SCRIPT></div>
 </td>
    </tr>
    <tr>
      <td>
<button onclick='_sl(document.myform.WebSite,true);'>全选</button>
<button onclick='_sl(document.myform.WebSite,false);'>全不选</button>
<button onclick='_setv(document.myform.WebSite,"http://www.google.com");'>set值</button>
<button onclick='alert(_getv(document.myform.WebSite));'>get值</button>
 </td>
    </tr>
<tr>
      <td align="center"><button onclick='document.myform.reset();'>重置</button> </td>
    </tr>
  </table>
</form>
</body>
</html>

 参考技术B 你可以参考一下这个：
http://blog.csdn.net/wzg199088/article/details/7899089

javascript 可多选的下拉框 multiselect 动态删除option值，动态添加option值，动态生成表格

首先引用一个写的很好的博客http://www.cnblogs.com/landeanfen/p/5013452.html

我使用的是bootstrap-multiselect，实现功能是

  1. 选择下拉框中的某几项数据后，通过点击add按键，可以将数据动态的添加到一个table中；
  2. 移除掉下拉框中的这几项；
  3. 删除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>

 

以上是关于html如何做下拉的可多选的复选框列表的主要内容，如果未能解决你的问题，请参考以下文章

java swing的可输入可多选的下拉框

一个类别和带分页的可多选表格的实现方案

网页制作中，做那种可多选的勾选框怎么做？

VB combobox怎么实现可多选下拉列表中的内容？

javascript 可多选的下拉框 multiselect 动态删除option值，动态添加option值，动态生成表格

HTML多选下拉框怎么做