Select表单控件的多选级联技术

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

Select表单控件的多选级联技术

需求提出：这个需求非常普遍，一般的B/S系统上都会有此类型的需求。举一个很典型的例子：在目前的一些技术论坛系统中，你发表一封帖子，而帖子可能包含很多种分类。
如：按语言分，则是java类；按行业分，则属于bank类,等等&hellip;&hellip;.因此在设计界面时，需求就要求你能选择多个分类，而且已选的分类不能再选。
解决方案：实现这个功能其实并不难，在表单里面有这样的控件<select name=&rdquo;select1&rdquo; multiple=&quot;true&quot; size=&rdquo;10&rdquo;>，用户就可以直接在上面选择自己要的分类就行。但是这个控件只能定义固定高度，而且当数据库中分类很多时，用户选择起来很费劲，而且多选时，必须按住Ctrl键。
基于这种方案的不足，同时针对这个应用需求，本人重新设计一个新的方案，则用两个select表单控件级联，则可以满足用户需求，且非常好操作。
新方案思想：上面方案之所以摒弃，因为不能满足易操作性，对于B/S系统来说，易操作性是一项非常重要的指标。
新方案实现这个功能采用三个表单控件：
1.    一个支持多选的下拉菜单select；
2.    一个支持单选的下拉菜单select;
3.    一个删除按钮button。
Jsp页面代码：
首先用javaScript定义一个二维数组；
<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;
&quot;http://www.w3.org/TR/html4/loose.dtd&quot;>
<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=gb2312&quot;>
<title>select级联</title>
</head>
<script language=&quot;javascript&quot;>

var allTypes = new Array();
  for(var i =0;i<4;i++ ){
var mainType = new Array();
  mainType[0] = &quot;大分类名&quot;+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]  = &quot;小分类名&quot;+i+&quot;&quot;+j;
subType[1] =i+&quot;&quot;+j;
subType_list[j] = subType;
}
allTypes = mainType;
}

function  addFileType(option){

var select1 = document.getElementById(&quot;select_types&quot;);
var  option_new = document.createElement(&quot;Option&quot;);

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]+&quot;-&quot;+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=&quot;select_types&quot; name=&quot;select_types&quot; multiple=&quot;true&quot; size=&quot;6&quot;  >
<optgroup label=&quot;       -----作品已有类型-----    &quot; ></optgroup>
</select>                                                                   <input type=&quot;button&quot; class=&quot;btn&quot; name=&quot;Submit2&quot; value=&quot;删除&gt;&gt;&quot;  onClick=&quot;deleteOption('select_types')&quot; >
                        
            <select name=&quot;select2&quot;  onchange=&quot;addFileType(this);&quot;>
                                                                  <option label=&quot;---请选择作品分类---&quot;  disabled=&quot;disabled&quot; selected></option>
<optgroup label=&quot;大分类名0&quot; >
<option value=&quot;00&quot;>小分类名00</option>
<option value=&quot;01&quot;>小分类名01</option>
<option value=&quot;02&quot;>小分类名02</option>
<option value=&quot;03&quot;>小分类名03</option>
</ optgroup>
<optgroup label=&quot;大分类名1&quot; >
<option value=&quot;10&quot;>小分类名10</option>
<option value=&quot;11&quot;>小分类名11</option>
<option value=&quot;12&quot;>小分类名12</option>
<option value=&quot;13&quot;>小分类名13</option>
</ optgroup>
<optgroup label=&quot;大分类名2&quot; >
<option value=&quot;20&quot;>小分类名20</option>
<option value=&quot;21&quot;>小分类名21</option>
<option value=&quot;22&quot;>小分类名22</option>
<option value=&quot;23&quot;>小分类名23</option>
</ optgroup>
<optgroup label=&quot;大分类名3&quot; >
<option value=&quot;30&quot;>小分类名30</option>
<option value=&quot;31&quot;>小分类名31</option>
<option value=&quot;32&quot;>小分类名32</option>
<option value=&quot;33&quot;>小分类名33</option>
</ optgroup>
            </select>
</body>
</html>

最后还要注意一个问题，select多选控件在提交表单时只会提交已选上的所有值，因此在点击提交按钮时，应该加上这样的js语句：

var allType = document.getElementById(&quot;select_types&quot;);  //

		自动登录	找回密码
密码			立即注册