`
colorfish
  • 浏览: 26476 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

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

JavaScriptJ#HTMLJSP 
阅读更多

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=" 删 除 &gt;&gt;"  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" );  //

分享到：
| 动态多附件上传----经典解决方案
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    mobile-select:移动端选择组件，支持级联（类似省市区）与非级联

    mobile-select移动端选择组件，支持级联（类似省市区）与非级联引入由于组件用到了modernizr的prefixed功能，所以需要引入modernizr.js&lt;link rel="stylesheet" href="index.css"&gt;[removed][removed][removed]...

    Angular 表单控件示例代码

    涉及的表单控件如下： text number radio select (基本类型) select (对象) multi select cascading select (级联操作) checkbox (boolean) multi checkbox 表单的局部效果 数据接口 export interface ...

    Element-UI 使用手册文档 V2.4.6 （Vue版本）.pdf

    Cascader 级联选择器 Switch 开关 Slider 滑块 TimePicker 时间选择器 DatePicker 日期选择器 DateTimePicker 日期时间选择器 Upload 上传 Rate 评分 ColorPicker 颜色选择器 Transfer 穿梭框 Form 表单 ...

    js操纵跨frame的三级联动select下拉选项实例介绍

    考察学生关于frame、浏览器对象，以及表单控件的概念，javascript事件触发机制和程序设计， 以及用CSS来组织文字展示的掌握程度，使学生对DHTML有更加深刻的理解。 实验内容【必做】 （１）建立一个包含三个frame的...

    angular2省市区三级联动组件

    angular2 省市区 三级 联动组件

    jQuery+PHP实现可编辑表格字段内容并实时保存

    本例依赖jquery库，并基于插件，...可自定义输入表单类型，目前jeditable提供text,select,textarea类型。 响应键盘的回车和ESC键。 插件机制，本例提供与jquery ui的datepicker日历控件的整合。 下面我们来一步步讲解

    产品经理必备Ant Design4.40-最新精编文件22年1月，AXURE原型设计，需要的素材和才考内容里面都有可以借鉴。

    autocomplete自动完成、checkbox多选框、cascader级联选择、datepicker日期选择框、form表单、inputnumber数字输入框、input输入框、mentions提及、rate评分、radio单选框、switch开关、slider滑动输入框、select...

    pickerextendjs一款多功能的移动端滚动选择器

    一款多功能的移动端滚动选择器，支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖拽等等..

    EXT教程EXT用大量的实例演示Ext实例

    把表单和输入控件都改成ext的样式。 4.1. 不用ext的form啊，不怕错过有趣的东西吗？ 4.2. 慢慢来，先建一个form再说 4.3. 胡乱扫一下输入控件 4.4. 起点高撒，从comboBox往上蹦 4.4.1. 凭空变出个comboBox来。 ...

    EXT2.0中文教程

    把表单和输入控件都改成ext的样式。 4.1. 不用ext的form啊，不怕错过有趣的东西吗？ 4.2. 慢慢来，先建一个form再说 4.3. 胡乱扫一下输入控件 4.4. 起点高撒，从comboBox往上蹦 4.4.1. 凭空变出个comboBox来。 ...

    asp.net知识库

    技术基础 New Folder 多样式星期名字转换 [Design, C#] .NET关于string转换的一个小Bug Regular Expressions 完整的在.net后台执行javascript脚本集合 ASP.NET 中的正则表达式 常用的匹配正则表达式和实例 经典正则...

    Ext 开发指南 学习资料

    把表单和输入控件都改成ext的样式。 4.1. 不用ext的form啊，不怕错过有趣的东西吗？ 4.2. 慢慢来，先建一个form再说 4.3. 胡乱扫一下输入控件 4.4. 起点高撒，从comboBox往上蹦 4.4.1. 凭空变出个comboBox来。 4.4.2...

Magicbox
Global site tag (gtag.js) - Google Analytics