javascrip实现下拉框联动

忘是亡心i 2022-09-18 09:47 177阅读 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 条评论，177人围观）

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

相关阅读

相关 JavaWeb Ajax实现下拉框联动

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

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

相关 javascrip实现下拉框联动

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

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

相关 ASP.NET——实现两个下拉框动态联动

引入：在网页中，我们经常会遇到下图中的情况。首先在下拉框中选择所在的省，选择之后，第二个下拉框会自动加载出该省中的市。这样设计极大的方便了用户的查找。那这是如何

逃离我推掉我的手/ 2022年08月10日 17:36/ 0 赞/ 199 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关如何通过jQuery实现select下拉框的联动效果

由于项目需要，小编需要实现三个HTML的select下拉框联动的效果，如果考虑到实际用户体验的话，直接用异步刷新的方式操作DOM是最好的选择，这里小编直接使用了

àì夳堔傛蜴生んèń/ 2021年09月14日 11:40/ 0 赞/ 808 阅读

相关 JavaScript 下拉框联动案例

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

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