javascrip实现下拉框联动

忘是亡心i 2022-09-18 09:47 203阅读 0赞

实际项目中几个下拉框需要联动是经常需要实现的功能.  
一般的实现方法是定义几个多维数组,利用数组的下标找到与上个下拉框的关系实现下拉框的联动.  
不妨定义几个js的数据对象来描叙这种几个下拉框数据间的关系.这样数据关系明了,实现也简单.  
见以下用javascript实现下拉框联动的实例

<script>  
 var itemAry1=new Array();  
 var itemAry2=new Array();  
 //定义第一个下拉框的数据结构   
 function Item(name,value)  
 \{  
  this.name=name;  
  this.value=value;  
 \}  
 //定义第二个下拉框的数据结构多了一个指向父项的数据  
 function SubItem(parent,name,value)  
 \{  
  this.parent=parent;  
  this.name=name;  
  this.value=value;  
 \}  
   
 //组织下拉框的数据  
 itemAry1\[0\]=new Item(1,'item1');  
 itemAry1\[1\]=new Item(2,'item2');  
   
 itemAry2\[0\]=new SubItem(1,"1","subItem1");  
 itemAry2\[1\]=new SubItem(1,"2","subItem2");  
 itemAry2\[2\]=new SubItem(1,"3","subItem3");  
 itemAry2\[3\]=new SubItem(2,"4","subItemA");  
 itemAry2\[4\]=new SubItem(2,"5","subItemB");  
   
 //初始化第一个下拉框数据  
 function initOption()  
 \{  
  for(var i=0;i<itemAry1.length;i++)  
  \{  
   document.getElementById("selectItem1").add(new Option(itemAry1\[i\].value,itemAry1\[i\].name));  
  \}  
  changeOption(document.getElementById("selectItem1").value);  
  \}  
   
  //联动第二个下拉框的数据  
  function changeOption(selectOpt)  
  \{  
   document.getElementById("selectItem2").length=0;  
   for(var j=0;j<itemAry2.length;j++)  
   \{  
    if(itemAry2\[j\].parent==selectOpt)  
    \{  
     document.getElementById("selectItem2").add(new Option(itemAry2\[j\].value,itemAry2\[j\].name));  
    \}  
   \}  
  \}  
</script>  
<html>  
<body οnlοad=initOption()>  
<select id="selectItem1" name="selectItem1" οnchange=changeOption(this.value)>  
</select>  
<select id="selectItem2" name="selectItem2"></select>  
</body>  
</html>

发表评论取消回复

表情：

评论列表（有 0 条评论，203人围观）

还没有评论，来说两句吧...

相关阅读

相关 thymeleaf实现树状下拉框（二级联动）

项目场景：承接上篇文章，此次记录的是树状下拉框的二级联动，点击次链接查看上篇文章: [thymeleaf实现树状下拉框][thymeleaf]. 问题描述 `提

小鱼儿/ 2023年09月30日 00:57/ 0 赞/ 17 阅读

相关 layui下拉框联动查询效果

前言之前有这么一个功能，需要设计一个联动效果来联动几个选择框，假设这里是院系-专业-班级，又或者省-市-县，又或者一级部门-二级部门等等的，一个下拉框选择联动另一个下拉

川长思鸟来/ 2023年07月25日 09:15/ 0 赞/ 19 阅读

相关 JavaWeb Ajax实现下拉框联动

博主在做项目时，需要做一个根据学期无刷新地址栏获取课程的功能，类似于地区联动选择。如图所示： 1.运行演示 ![在这里插入图片描述][20210119154723185

谁践踏了优雅/ 2023年01月08日 08:18/ 0 赞/ 185 阅读

相关 javascrip实现下拉框联动

实际项目中几个下拉框需要联动是经常需要实现的功能. 一般的实现方法是定义几个多维数组,利用数组的下标找到与上个下拉框的关系实现下拉框的联动. 不妨定义几个js的数据对

忘是亡心i/ 2022年09月18日 09:47/ 0 赞/ 204 阅读

相关 html年月日下拉联动菜单年月日三下拉框联动

<html> <head> <title>年月日三下拉框联动</title> <meta http-equiv='Content-Type' c

末蓝、/ 2022年06月08日 06:54/ 0 赞/ 586 阅读

相关 easyui下拉框实现二级联动

原理：第一数组正常展示，根据选中的选项将选项下的数组赋给下一复选框 theGetData = data["linkage"];//ajax请求回来的

男娘i/ 2022年05月21日 04:05/ 0 赞/ 343 阅读

相关 js快速实现省市级二级联动下拉框

由于逻辑简单，可以快速实现，我就直接上代码了。目前来说数据都应在数据库中，这个是偶然发现的一个代码，所以记录一下，以防万一使用； html部分 <div cla

梦里梦外;/ 2022年03月06日 10:22/ 0 赞/ 495 阅读

相关 JSF实现h:selectOneMenu 联动框处理，更改下拉框显示。

目的：当下拉框改动的时候，则前端显示的按钮根据下拉框改动来更改。写一个监听，当下拉框更改的时候，则调用后台的类，更新状态，再reRender 回传渲染给组件。

灰太狼/ 2021年12月11日 22:51/ 0 赞/ 333 阅读

相关下拉框联动jquery\js例子

下拉框联动jquery\\js例子具体代码如下： $(window).load(function () { // 父级下拉框修改时，根据

小咪咪/ 2021年12月11日 08:45/ 0 赞/ 375 阅读

相关 JavaScript 下拉框联动案例

功能描述页面上有两个下拉框，左边显示国家，右边显示城市，左边发生变化的时候，右边下拉选择内容同时发生变化，实现联动效果。 ![在这里插入图片描述][watermar

小灰灰/ 2021年06月24日 16:10/ 0 赞/ 544 阅读