colorfish 发表于 2013-2-7 16:42:15

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 = "大分类名"+i;
mainType = i; //大分类ID
   var subType_list =newArray();
mainType =subType_list;
for(var j= 0;j<4;j++){
   var subType = new Array();
    subType= "小分类名"+i+""+j;
subType =i+""+j;
subType_list = subType;
}
    allTypes = mainType;
}



functionaddFileType(option){

var select1 = document.getElementById("select_types");
varoption_new = document.createElement("Option");

for(var m = 0;m < allTypes.length; m++ ){
var element = allTypes;
   
   varsubTypeList =element;

for(var n = 0;n < subTypeList.length; n++ ){

if(option.value == subTypeList){
option_new.text = element+"-"+subTypeList;
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.value.substring(0,1)){
      addFlag = 1;   
      alert('你已经选择了此种大分类');
      break;
    }
   
}
if(addFlag == 0){
   select1.options.add(option_new);
   return;
   }

}

}


functiondeleteOption(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");//
页: [1]
查看完整版本: Select表单控件的多选级联技术