多级关联下拉选择框的高效实现（想用“最优”的，还是不敢）

最新推荐文章于 2023-06-16 16:10:56 发布
最新推荐文章于 2023-06-16 16:10:56 发布
阅读量1.2k 收藏
点赞数
文章标签： null javascript menu function 数据结构 xml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wizz/article/details/7818
版权

偶然看见一篇《现利用xml数据岛实现多级关联下拉选择框的做法》

思路居然和我前几天做的不谋而合。但是我觉得我的方法更简单，不需要调用XML Dom。数据下载量也要小一些。

当时做就是考虑到选项会很多，定义关联关系的数据结构要高效，过多的下载量会使用户反感。

同时，这些定义需要在服务器端动态生成，按目前的定义方法也只要用嵌套的循环输出就非常容易实现。

再有就是通用性，灵活性。和前面提到的大作都类似了。

<script language=JavaScript> </script>

闲话少说，书归代码：

<BODY>
<SELECT NAME="s1"><option>需要JavaScript才能正确显示</SELECT>
<SELECT NAME="s2"></SELECT>
<SELECT NAME="s3"></SELECT>
<SELECT NAME="s4"></SELECT>

<SCRIPT LANGUAGE="JavaScript">
<!--

 

//选择框的名字
selector = [ "s1", "s2", "s3", "s4" ];

 

//选择项: "名字", "值", 子选择
menu = [
"地球","1",
 [
 "中国","86",
  [
  "北京","BJ",
   [
   "--","1",null
   ],
  "四川","SC",
   [
   "成都","28",null,
   "乐山","",null,
   "攀枝花","",null,
   "自贡","",null,
   "德阳","",null,
   "绵阳","",null
   ]
  ],
 "米国","1",
  [
  "加利福尼亚","CA",
   [
   "旧金山","1",null,
   "洛杉矶","2",null
   ],
  "华盛顿","WA",
   [
   "西雅图","seattle",null
   ]
  ]
 ],
"火星","2",
 [
 "大峡谷","86",
  [
  "小山丘","BJ",
   [
   "A地区","28",null,
   "B地区","",null,
   "C地区","",null
   ]
  ]
 ]
];

 

function wizz(level)
{
 if( level == 0 )
  a = menu;
 else
 {
  str = "menu";
  for( i=0; i<level; i++ )
   str += "[" + (document.all[selector[i]].selectedIndex * 3 + 2)  + "]";
  a = eval(str);
 }
 if( a == null ) return;
 
 s = document.all[selector[level]];
 i = s.length;
 while( i > 0 ) s.options[--i] = null;
 while( i < Math.floor(a.length/3) )
  s.options[i] = Option( a[i*3], a[i++*3+1] );
 s.onchange = Function("wizz(" + (level+1) + ")");
 wizz(level+1);
}

 

wizz(0);

//-->
</SCRIPT>

 

</BODY>
</HTML>

 

我觉得效率还可以了，大家还有什么高招欢迎交流 wizz@21cn.com

wizz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
jQuery实现多级联动下拉列表查询框
11-23
在本文中，我们将深入探讨如何使用jQuery来实现一个多级联动的下拉列表查询框。这个功能常用于网站上的筛选和过滤，例如在选择产品时，用户先选择品牌，然后根据选择的品牌进一步选择型号。这样的设计可以提高用户...
layui下拉,一级二级三级,多级联动,
疑问 搜索 动手 解决 记录
10-14 2796
省市县三级地图,三个select联动效果 基于layui实现的省市县区三级联动下拉选择器 关于layui 这里不做介绍，直戳我阅读 关于本省市区级联下拉选择器 本选择器已经将它封装成一个layui的插件，使用起来非常方便，支持一个页面中使用多个省市区选择器，并且支持选择结果回调，支持自定义lay-filter。 使用方法以及一些约定 html部分 整个选择器需要使用一个父标签包裹，如下使用了id=“area-picker”，并且分别给省、市、区的select加上province-selector、city
vue基于element-ui的Select选择器实现的动态多级联动下拉选择
热门推荐
Vincentyun
04-10 2万+
demo地址 代码如下： Html <div id="app"> <el-select v-for="(arrItem,key) in selectList" :key="key" v-model="selectArr[key]" filterable placeholder="请选择" value-key="value" @change="selected" @focu...
vue联级选择器拆分三个下拉框
m0_50884068的博客
04-13 461
// 挂载钩子 mounted() { // 遍历一级数据 lingdangAddressPicker.forEach(i=>{ // 追加数据 this.shengselect.push({ value: i.id, label: i.name }) }) } // 省监听 //第一个下拉框监听事件 shengbtn(vla){ // 进来每次清空 this.shiselect=[]
多级联动下拉框,前端显示
m0_56758388的博客
06-16 430
基于宿舍管理系统下,进行入住登记功能,点击新增动态查询数据库中所有楼栋,并点击相应楼栋后,动态生成楼内所有楼层,接着动态生成该层内所有宿舍。3>动态显示所有楼栋,定义 @change="createFloor()" 当改变所选楼栋后,获取该楼栋的所有层数。定义 @change="createDormList()" 方法,选择完楼层后,根据楼栋id,查询该层内所有宿舍。5>后端服务器接收请求,调用 查询相应楼栋楼层下的所有宿舍的方法。2>后端接收请求,创建相应方法动态查询数据库中所有楼栋信息。
vue使用element三级联动下拉框多选
weixin_51565477的博客
09-01 1588
选中高级软件和软件ui工程师之后，一级中的金融和工程也高亮了，这是因为后台返回数据的id（这里后台返回的categoryId值重复）值重复了 template <el-form-item label="职位类别：" prop="listJobCategoryDTOLIN"> <el-cascader :change-on-select="false" :props="defaultParams" :options="options" ..
Bootstrap实现下拉菜单多级联动
08-28
但是，以上代码只能创建一个简单的下拉菜单，而不能实现多级联动。要实现多级联动，我们需要添加一些 CSS 样式和 JavaScript 代码。 首先，我们需要添加一个 `.dropdown-submenu` 类来定义子菜单的样式： ```css ....
JSP、Java实现选择框多级连动
12-03
在 JSP 页面中，需要使用 Struts 的 <html:select> 标签来生成选择框，并使用 JavaScript 代码来实现选择框的多级连动。当用户选择某个选项时，需要使用 Ajax 或 JavaScript 代码来请求服务器端的数据，并动态更新...
VBA设置多级下拉菜单.xlsm
06-18
VBA设置多级下拉菜单.xlsm VBA设置动态多级下拉菜单.xlsm
从零开始SpringCloud Alibaba实战（52）——bootstrap-select多级联动下拉框
liuerchong的博客
08-23 1963
页面前端用的技术为bootstrap 做一个级联下拉框 效果 环境相关 bootstrap 3.3.7 jquery 3.3.1 bootstrap-select 1.13.9 数据表结构如下 -- 地址配置表(address_config) create table address_config ( option_value varchar(20) not null comment '地址编号', parent_id varchar(60) not null comment '父级编号', opt
可以放到项目中用 多选下拉列表 复选下拉列表 jquery多选列表 多选多级联动下拉列表，有demo
11-09
可以放到项目中用 mutiselect 下拉多选插件 可以放到项目中用 多选下拉列表 复选下拉列表 jquery多选列表 多选多级联动下拉列表，有demo
jQuery无限层级下拉框
10-11
jQuery 无限层级 下拉框 多级下拉
选择结构
qq_15009447的博客
01-06 151
产生随机三位数 int random = (int) (Math.random() * 900 + 100); 产生随机一位数 int random=(int)(Math.random()*10); if结构 if(条件){ } Scanner input=new Scanner(System.in); String sex=input.next(); 字符串的比较用sex.equals(“男”); switch 结构 switch(表达式){ case(常量)： break； case(常量)： brea
Angular中nz-select实现两个选择框互相关联
m0_51935008的博客
01-25 2510
两个选择框 一个是版本名称 一个是版本号 每一个版本都对应一个版本号,当选择其中任意一个时,另外一个都会发生变化.
实现 cxTreeList使用复选框实现多选 自动级联选择
gykthh的专栏
10-18 4139
实现 cxTreeList使用复选框实现多选 自动级联选择 var RootNode,SonNode:TcxTreeListNode; qryRoot,qrySon:TADOQuery; cxTreeList1.Root.CheckGroupType:=ncgCheckGroup; qryRoot:=TAdoQuery.create(nil); qrySon:=
二级联动，第二级是多选框 multipleSelect
ting_125的博客
02-07 6929
需要做个二级联动的功能，第二级要求是多选，用的multiple-Select方法 以老师-学生为例，数据是从后台传到前台页面的一个list中带list的JSONArray 引用（不要忘了引用图片，要不输入框右边没有三角） jsp页面 未选择 ${teacher.name} js页面 var teachers = ${t
bootstrap-select动态级联多选下拉框
LLL_liuhui的博客
09-25 1万+
1、引用css/js &lt;link href="../../plugins/css/bootstrap.min.css" rel="stylesheet"&gt; &lt;link href="../../plugins/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet"&gt; &lt;lin
11 选择结构
Blog of Lytracy
10-09 1390
文章目录1、程序结构2、`if`语句3、`if-else`语句4、`if…elif…else`语句——多重if选择结构5、嵌套选择结构6、条件表达式7、练一练计算身体质量指数猜拳游戏升序排序 1、程序结构 Python程序设计中的3种基本结构为顺序结构、选择结构和循环结构。 生活中的判断场景 程序中的判断场景 2、if语句 Python中使用if保留字来组成选择语句，简单的语法格式如下： if 表达式: 语句块 练一练： 从键盘获取自己的年龄，判断是否大于或者等于18岁，如果满足就输出“已
多重if 和 嵌套 if 选择结构
zhou_nj的博客
08-08 976
1.在实际开发中，如果判断的条件不止两个，这样我们就需要用到多重 if 2.例如：如果你有500万存款，买宾利。如果你有300万存款，买奔驰。 有100万存款，买奥迪。如果你有50万存款，买大众。有10万存款， 买奥拓。否则买一辆捷安特。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-...
uniapp 怎么实现多级选择框
最新发布
07-16
在 uniapp 中实现多级选择框，可以通过使用联动选择器（picker）组件来实现。联动选择器可以实现多级选择框的功能，用户可以在每个级别中选择相应的选项。 以下是一个示例代码，演示如何在 uniapp 中实现多级选择框： ```html <template> <view> <picker mode="multiSelector" :range="multiArray" @change="bindMultiPickerChange"> <view class="picker"> {{ multiIndexArray }} </view> </picker> </view> </template> <script> export default { data() { return { multiArray: [ ['选项1', '选项2', '选项3'], ['选项A', '选项B', '选项C'], ['选项X', '选项Y', '选项Z'] ], multiIndexArray: [0, 0, 0] } }, methods: { bindMultiPickerChange(e) { this.multiIndexArray = e.detail.value; // 处理选择变化后的逻辑操作 } } } </script> ``` 在上述代码中，`multiArray` 是一个多维数组，表示多级选择框的选项。每个维度对应一个级别的选项。`multiIndexArray` 是一个存储选择的索引的数组，初始值为 `[0, 0, 0]`，表示默认选择每个级别的第一项。 `picker` 组件通过 `mode="multiSelector"` 属性设置为多级选择器模式。`range` 属性绑定 `multiArray` 数组，用于显示选项。`@change` 事件绑定 `bindMultiPickerChange` 方法，当选择发生变化时触发。 在 `bindMultiPickerChange` 方法中，通过 `e.detail.value` 获取到选择的索引值，将其赋值给 `multiIndexArray`。你可以在该方法中处理选择变化后的逻辑操作。 通过以上代码，你可以实现一个基本的多级选择框。你可以根据自己的需求修改 `multiArray` 数组来定义不同级别的选项，以及在 `bindMultiPickerChange` 方法中处理选择变化后的逻辑操作。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值