Select表单控件的多选级联技术
需求提出：这个需求非常普遍，一般的B/S系统上都会有此类型的需求。举一个很典型的例子：在目前的一些技术论坛系统中，你发表一封帖子，而帖子可能包含很多种分类。
如：按语言分，则是java类；按行业分，则属于bank类,等等…….因此在设计界面时，需求就要求你能选择多个分类，而且已选的分类不能再选。
解决方案：实现这个功能其实并不难，在表单里面有这样的控件<select name=”select1” multiple="true" size=”10”>，用户就可以直接在上面选择自己要的分类就行。但是这个控件只能定义固定高度，而且当数据库中分类很多时，用户选择起来很费劲，而且多选时，必须按住Ctrl键。
基于这种方案的不足，同时针对这个应用需求，本人重新设计一个新的方案，则用两个select表单控件级联，则可以满足用户需求，且非常好操作。
新方案思想：上面方案之所以摒弃，因为不能满足易操作性，对于B/S系统来说，易操作性是一项非常重要的指标。
新方案实现这个功能采用三个表单控件：
1. 一个支持多选的下拉菜单select；
2. 一个支持单选的下拉菜单select;
3. 一个删除按钮button。
Jsp页面代码：
首先用javaScript定义一个二维数组；
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>select级联</title>
</head>
<script language="javascript">
var allTypes = new Array();
for(var i =0;i<4;i++ ){
var mainType = new Array();
mainType[0] = "大分类名"+i;
mainType[1] = i; //大分类ID
var subType_list = new Array();
mainType[2] = subType_list;
for(var j= 0;j<4;j++){
var subType = new Array();
subType[0] = "小分类名"+i+""+j;
subType[1] =i+""+j;
subType_list[j] = subType;
}
allTypes[i] = mainType;
}
function addFileType(option){
var select1 = document.getElementById("select_types");
var option_new = document.createElement("Option");
for(var m = 0;m < allTypes.length; m++ ){
var element = allTypes[m];
var subTypeList = element[2];
for(var n = 0;n < subTypeList.length; n++ ){
if(option.value == subTypeList[n][1]){
option_new.text = element[0]+"-"+subTypeList[n][0];
break;
}
}
}
option_new.value = option.value;
var addFlag = 0;
if(select1.options.length<1){
select1.options.add(option_new);
}else{
for(var k = 0; k < select1.options.length;k++){
if(option_new.value.substring(0,1) == select1.options[k].value.substring(0,1)){
addFlag = 1;
alert('你已经选择了此种大分类');
break;
}
}
if(addFlag == 0){
select1.options.add(option_new);
return;
}
}
}
function deleteOption(select_element){
var select1 = document.getElementById(select_element);
if(select1.options.length <1)
{ return false;
}
select1.remove(select1.selectedIndex);
select1.selectedIndex = select1.options.length-1;
}
</script>
<body><select id="select_types" name="select_types" multiple="true" size="6" >
<optgroup label=" -----作品已有类型----- " ></optgroup>
</select> <input type="button" class="btn" name="Submit2" value="删除>>" onClick="deleteOption('select_types')" >
<!-- ***********这里显示所有的作品类型***************** -->
<select name="select2" οnchange="addFileType(this);">
<option label="---请选择作品分类---" disabled="disabled" selected></option>
<optgroup label="大分类名0" >
<option value="00">小分类名00</option>
<option value="01">小分类名01</option>
<option value="02">小分类名02</option>
<option value="03">小分类名03</option>
</ optgroup>
<optgroup label="大分类名1" >
<option value="10">小分类名10</option>
<option value="11">小分类名11</option>
<option value="12">小分类名12</option>
<option value="13">小分类名13</option>
</ optgroup>
<optgroup label="大分类名2" >
<option value="20">小分类名20</option>
<option value="21">小分类名21</option>
<option value="22">小分类名22</option>
<option value="23">小分类名23</option>
</ optgroup>
<optgroup label="大分类名3" >
<option value="30">小分类名30</option>
<option value="31">小分类名31</option>
<option value="32">小分类名32</option>
<option value="33">小分类名33</option>
</ optgroup>
</select>
</body>
</html>
最后还要注意一个问题，select多选控件在提交表单时只会提交已选上的所有值，因此在点击提交按钮时，应该加上这样的js语句：
var allType = document.getElementById("select_types"); // 提交之前，把作品类型控件全部置为被选上状态
for(var k = 0;k<allType.options.length;k++){
allType.options[k].selected = true;
}
1972
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
