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

最新推荐文章于 2024-04-08 17:29:11 发布
最新推荐文章于 2024-04-08 17:29:11 发布
阅读量253 收藏
点赞数
分类专栏： java基础 文章标签： JavaScript J# HTML JSP ViewUI

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"  οnchange="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" );  //

iteye_450
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Thymeleaf select 使用 和多select 级联选择
likunpeng6656201的博客
08-13 5150
1.使用select 并且回绑数据; 页面： 状态： <select name="status" th:field="*{status}" id="idstatus" class="input-select" th:value="*{status}"> <option value="">--请选择--</option> <option th:each=...
layui-多选下拉框-xm-select-demo源码
10-10
《layui-多选下拉框-xm-select：前端开发中的高效解决方案》 在现代Web开发中，用户界面的交互性和易用性是至关重要的。layui框架以其轻量级、高效和丰富的组件库，成为了众多开发者青睐的选择。尤其在构建多选...
select框 多级联动
dq0817_的博客
01-19 965
数据表结构 id,city_name,pid(父级ID) 控制器代码 $city = City::where('pid',0)->select(); return View::fetch('index/save',['data'=>$city]); 前端 <lable>地区</lable> <select name="city[]" id="first"> <option va
select多选框省市县三级级联
qq_43527694的博客
07-27 670
通过“模块化开发”的方式来实现三级级联： test.jsp: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <title>Insert title here</title> <script type="text/javas
select 多选联动
haofangkiller的专栏
10-25 979
比如：select1选项内容为[123,345],"123"触发select2为["A","B","C"] ,"345"触发select2为["B","C","D","E"],同时选中"123"，"345"时，则select2应为["A","B","C","D","E"]；废话不多说，直接上代码。刚开始找了两个mutipleSelect库，要么是方法说明不全，要么是select不能被二次赋值更新，不过最终还是找到一个可用，样式简单的多选库，链接在最下边。
Angular 表单控件示例代码
12-09
本文将深入探讨Angular Template-driven表单中常见控件的使用方法，包括text、number、radio、select、multi select、cascading select（级联选择）以及checkbox等。 首先，我们来看一下`User`接口，这是用于存储...
基于vue2.0实现的级联选择器
08-30
在jquery中有很多插件，例如select2，可以实现选择、多选的功能。然而，在vue中，我们可以使用vue的组件化机制和双向数据绑定来实现级联选择器。 知识点四：后端处理数据逻辑 在实现级联选择器时，我们需要考虑...
j2ee05,js03，表单验证，级联列表，创建删除节点(添加删除附件)，级联列表，对表格增删改查。html和js的帮助文档
08-12
例如，它们可能会介绍如何使用HTML的`<form>`元素、`<input>`控件、`<select>`等创建表单，如何利用JavaScript的DOM API进行元素操作，以及如何利用AJAX进行异步通信。 总结来说，这个压缩包涉及的技术涵盖了前端...
(css)el-tag标签，el-select多选框，el-cascader级联选框自定义样式
最新发布
nyf_unknow的博客
04-08 802
root {// 标签.tagNew {// 多选框// 级联。
select级联框 js json 全动态
01-22
本代码为在jquery框架上，以json数据为基础数据，动态生成的select级联功能。
select级联下拉列表
06-19
select级联下拉列表 JS实多级联动下拉菜单类,简单实现省市区联动菜单! 无刷新级联下拉框的jquery代码 jQuery+HTML5实现的带链接箭头的多级下拉菜单
省市县三级级联select
10-27
里面有三个文件，jq和html放一起，pro省市县文件最好和你的jsp界面在同一目录下
select级联二级菜单
03-28
非常实用的select二级级联菜单.欢迎下载学习
select2 省市区 级联 下拉菜单
10-10
select2 下拉搜索 级联 全国省市区的三级联动 谢谢
layui 集合 xm-select 、tableSelect、cascader级联选择器
weixin_41965172的博客
03-10 5294
layui 官方镜像站 http://layui-doc.pearadmin.com/ layui 免费CDN静态库 https://www.layuicdn.com/#Layui 基于layui xm-select 多选 https://maplemei.gitee.io/xm-select/#/senior/getValue lay_cascader 级联选择器 https://gitee.com/yixiacoco/lay_cascader LayUi组件：TableSelect
select三级联动选择—基于layui的select
努力学习Java的彬彬的博客
04-10 5883
三级联动选择
select级联选择器参考 原生JS实现和jQuery实现
qq_40178497的博客
03-27 2022
原生JS实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t.
Select级联
weixin_44182586的博客
02-27 137
$("select[name='payeeBankName']").change(function(){nameAndAcount();});//添加 值改变 的监听 function nameAndAcount(){//联动逻辑 函数 //收款行 var bank = $("select[name='payeeBankName']").val(); //账号 var appe...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值