`
colorfish
  • 浏览: 26832 次
  • 性别: 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" );  //

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

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

相关推荐

    layui-多选下拉框-xm-select-demo源码

    《layui-多选下拉框-xm-select：前端开发中的高效解决方案》 在现代Web开发中，用户界面的交互性和易用性是至关重要的。layui框架以其轻量级、高效和丰富的组件库，成为了众多开发者青睐的选择。尤其在构建多选...

    j2ee05,js03，表单验证，级联列表，创建删除节点(添加删除附件)，级联列表，对表格增删改查。html和js的帮助文档

    例如，它们可能会介绍如何使用HTML的`&lt;form&gt;`元素、`&lt;input&gt;`控件、`&lt;select&gt;`等创建表单，如何利用JavaScript的DOM API进行元素操作，以及如何利用AJAX进行异步通信。 总结来说，这个压缩包涉及的技术涵盖了前端...

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

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

    Angular 表单控件示例代码

    `select`下拉框是另一种常见的表单控件，可以用于选择一个值。如果选项是基本类型，如字符串或数字，可以这样设置： ```html &lt;select name="role" class="form-control" [(ngModel)]="user.role"&gt; *ngFor="let ...

    input 级联下拉列表

    `input`元素是HTML中的一种表单控件，用于接收用户输入。在创建级联下拉列表时，我们通常使用`&lt;select&gt;`标签来定义下拉列表，并通过`&lt;option&gt;`标签定义可选的项。 2. **基本结构**： 基本的级联下拉列表由两个或...

    基于vue2.0实现的级联选择器

    在jquery中有很多插件，例如select2，可以实现选择、多选的功能。然而，在vue中，我们可以使用vue的组件化机制和双向数据绑定来实现级联选择器。 知识点四：后端处理数据逻辑 在实现级联选择器时，我们需要考虑...

    JQuery写的日期级联下拉菜单

    - **节省空间**：在屏幕空间有限的情况下，级联下拉菜单比日历控件更节省空间。 - **易于实现**：使用jQuery，开发者可以快速实现这样的功能，减少代码量和复杂度。 适用于那些希望保持页面简洁且需要用户输入日期...

    Asp.net Ajax CascadingDropDown 控件省市县联动C#代码

    3. **ParentControlID**：指定与当前控件级联的父级下拉列表的ID。 4. **PromptText**：当没有选择父级项时，下拉列表显示的提示文本。 5. **Level**：表示控件在级联结构中的层级，对于省市县联动，省、市、县的...

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

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

    antd数据采集表单.zip

    2. 表单控件：项目可能包含多种表单控件，如Input（输入框）、Select（下拉选择框）、DatePicker（日期选择器）、Cascader（级联选择器）等，用于收集不同类型的学生信息。 3. 表单验证：通过设置rules属性，项目将...

    Ext combo 下拉框级联

    Combobox是Ext JS中一个用于创建下拉列表的控件，它结合了输入框和下拉列表的功能。通过配置store、displayField、valueField等属性，可以实现数据的展示和选择。 1. **配置store** - Store是Ext JS中用于存储数据...

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

    `pickerextendjs`是一个高度可配置的滚动选择器，其核心在于提供了一种灵活的方式来处理单选、多选以及多级级联的选择场景。它不仅支持在移动设备上流畅运行，同时考虑到了PC端的兼容性，实现了拖拽操作。这一组件的...

    javascript实现二级级联菜单的简单制作

    - &lt;label&gt;：为表单控件定义标注，可以提高表单的可用性和可访问性。 4. JavaScript与HTML结合实现动态交互 - 在HTML中通过id或class与JavaScript中的选择器相匹配，实现对DOM元素的操作。 - JavaScript中的函数...

    基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用

    - 级联选择：在编辑页面中，Select2可以用于创建级联下拉列表，比如省份选择后加载对应的市，市选择后加载对应的区，实现联动效果。 - 多项选择：在需要用户勾选多个选项的场景下，如兴趣爱好、服务类型等，Select...

    JQuerry 插件介绍

    - jQuery controlled dependent (or Cascading) Select List：创建级联下拉菜单。 - Multiple Selects：支持多选的下拉菜单。 - Select box manipulation：控制和定制选择框的行为。 - Select Combo Plugin：...

    地区选择控件

    2. 初始化控件：在JavaScript中，调用库提供的函数创建地区选择控件，可能需要指定一个DOM元素（如`&lt;select&gt;`标签）作为容器。 3. 绑定事件：设置事件监听器，当用户选择新的省份或城市时，更新显示的选项，可能还...

    angular2省市区三级联动组件

    在Angular2中，开发一个省市区三级联动组件是一项常见的任务，尤其在构建具有地理选择功能的...在提供的`mit-city-select-master`压缩包中，可能包含了这个组件的具体实现和示例，你可以查看源码学习更具体的实现方式。

    jquery控制select的text/value值为选中状态

    在Web开发中，select元素是一个常用的表单控件，用于让用户选择一个或多个预定义的选项。使用jQuery可以很容易地控制select元素的选中状态，即设置或获取select中某个option的text或value属性。以下是对jquery控制...

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