本文介绍了一种改进的表单多选级联技术，通过使用两个 select 控件和一个按钮，解决了传统多选控件操作不便的问题。该方案不仅提高了用户选择效率，还简化了界面设计。
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" onchange="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" ); //
扫一扫
1031
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
