学习笔记——下拉框实现左右联动

Posted 2020-06-27 ......................

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习笔记——下拉框实现左右联动相关的知识，希望对你有一定的参考价值。

先看一下效果图技术分享

然后是代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
  </style>

 </head>
  <body>
<select id="select1" onchange="test(this.value);" style="width:100px" ><!--通过onchange设置选定事件-->
<option value="0">--请选择--</option>
<option value="a1">逗比</option>
<option value="a2">大逗比</option>
<option value="a3">小逗比</option>
<option value="a4">逗比逗比</option>
</select>
<select id="select2" style="width:100px" onchange="">

</select>

  
 </body>
   <script type="text/javascript">
var arr=new Array(4);
arr[0]=["a1","是你1","是你2","是你3","是你4"];
arr[1]=["a2","是你45","是你454","是你6","是你47"];
arr[2]=["a3","是你456","是你6456","是你645","是你78"];
arr[3]=["a4","是你767","是你454","是你786","是你44"];
/*
1.遍历数组，得到第一个元素
2.判断val的值与第一个是否相等
3.相等后，获取数组后面的元素
4.得到select2的id
5.创建子节点option，添加过去appendChild
*/
function test(val){
    var aaa=document.getElementById("select2");
    var bbb=aaa.getElementsByTagName("option");
    for(var m=0;m<bbb.length;m++){
    var op=bbb[m];
    aaa.removeChild(op);
    m--;
    /*由于如果不每次进行删除，那么
      第二个下拉框里的option就会进行叠加，把上一个的元素叠加进去
      因此，每次在第一个下拉框中进行选择后，都要进行判断，把第二个下拉框里存在的option删除；
      同样需要注意m--；以及删除要从父节点开始删除子节点
    */

    }
for(var i=0;i<arr.length;i++)
    {
        var arr1=arr[i];
        var arr11=arr1[0];
        if(val==arr11)
        {
            var aaa=document.getElementById("select2");
            
            for(var j=1;j<arr1.length;j++){
            var b1=arr1[j];
            var option1=document.createElement("option");
            var text1=document.createTextNode(b1);
            option1.appendChild(text1);
            aaa.appendChild(option1);
            }
            
        }
    }
}
</script>
</html>

实现这个需要注意的一些都在注释里，另外感觉子节点创建删除这些，需要再看一下

 var aaa=document.getElementById("select2");
    var bbb=aaa.getElementsByTagName("option");
    for(var m=0;m<bbb.length;m++){
    var op=bbb[m];
    aaa.removeChild(op);
    m--;
}子节点删除，从父节点入手；
然后是在对象里创建标签
创建option标签

 var option1=document.createElement("option");创建标签
            var text1=document.createTextNode(b1);创建文本
            option1.appendChild(text1);将文本和标签连接起来
            aaa.appendChild(option1);最后就可以导入到对象里

以上是关于学习笔记——下拉框实现左右联动的主要内容，如果未能解决你的问题，请参考以下文章

asp.net下拉框二级联动(如何实现)

struts2.1 和ajax实现二级下拉框联动，使用jquery、json，代码怎么实现。

小程序scroll-view实现三级分类左右联动，上拉加载以及下拉刷新

asp 下拉框二级联动

实现两级下拉框的联动

三级联动怎么回显 javaweb