下拉框与下拉框之间的联动效果

时间：2022-07-03 23:06:33
下拉框与下拉框之间的联动效果下拉框与下拉框之间的联动效果
 1  
 2 <html>
 3 <head>
 4   <meta charset="utf-8">
 5   <title>下拉框与下拉框之间的联动效果</title>
 6   <script language="JavaScript">
 7  function setSel(obj){
 8 
 9     var s=obj.value;
10     var f=document.getElementById("test1");
11     var obj=document.getElementById("test3");
12     /*循环 相应变的select*/
13     for(i=0;i<f.options.length;i++){
14         /*判断值相等的，也可以判断显示的f.options[i].test*/
15         if(f.options[i].value==s){
16         f.options[i].selected="selected";//选中
17         obj.options.add(new Option(f.options[i].text,f.options[i].value)); //这个兼容IE与firefox
18         } 
19     }
20 }
21   </script>
22 </head>
23 
24 <body>
25 <form>
26 
27 <fieldset style="width:500px;margin-left:32%;margin-top:10%;">
28     <legend >下拉框与下拉框之间的联动效果</legend>
29         <table border="1" cellpadding="5px" cellspacing="0" align="center" style="margin-top:10%;margin-bottom:10%;" width="300px" height="150px">
30         
31             <tr>
32                 <th>一级科目</th>
33                 <th>二级科目</th>
34                 <th>三级科目</th>
35             </tr>
36             
37             <tr>                
38                 <td align="center">                 
39                     <select id="test2" onchange="setSel(this);">
40                         <option value='1'>1</option>
41                         <option value='2'>2</option>
42                     </select>
43                 </td>
44                 
45                 <td align="center">
46                 <select id="test1">
47                     <option value='1'>1</option>
48                     <option value='2'>2</option>
49                     <option value='3'>2</option>
50                 </select>
51                 </td>    
52 
53                 <td>
54                     <select id="test3">
55                     </select>
56                 </td>
57             </tr>
58             
59         </table>        
60 </fieldset>
61 
62 </form>
63 </body>
64 </html>
网上的源码
下拉框与下拉框之间的联动效果下拉框与下拉框之间的联动效果
 <html>
<head>
  <meta charset="utf-8">
  <title>下拉框与下拉框之间的联动效果</title>
  <script language="JavaScript">
 function setSel(obj){
    //alert(obj.value+"        1111222222");
    var k1=obj.value;//下拉框一的值
    var k2=document.getElementById("test2");
    
    //var obj2=document.getElementsByName("inps");   //获取相同name值的属性
    //var obj2=document.getElementsByTagName("input");   //获取所有相同的标签元素

    var len_k2=k2.length;
    for(var i=0;i<len_k2;i++){//此处没删除一次，长度值就会发生变化，所以需要用一个变量来表示该长度值
        k2.remove(0);//因为每次删除后，值得顺序都发生了变化，所以最好每次都删第一个元素
    }
    
    var obj2=document.getElementsByName(k1);   //将一级科目的下拉框的值作为获取相同name值的变量
    for(var i=0;i<obj2.length;i++){   //一定要用var作为声明类型
        k2.options.add(new Option(obj2[i].value,obj2[i].value));
    }
}
  </script>
</head>

<body>
<form>
<!--
基本方式有以下两种：
方式1：
给出菜单1的菜单数据，当点击某个菜单项后，把该项的值传给服务端，由服务端返回新的菜单数据到菜单2.
方式2：
菜单数据静态存储在js或者html元素中，当点击某个菜单项后，直接把相应的菜单数据到菜单2.
-->
<fieldset style="width:500px;margin-left:32%;margin-top:10%;">
    <legend >下拉框与下拉框之间的联动效果</legend>
        <table border="1" cellpadding="5px" cellspacing="0" align="center" style="margin-top:10%;margin-bottom:10%;" width="300px" height="150px">    
            <tr>
                <th>一级科目</th>
                <th>二级科目</th>
            </tr>    
            <tr>                
                <td align="center">                 
                    <select id="test1" onchange="setSel(this)">
                        <option value='1'>1</option>
                        <option value='2'>2</option>
                    </select>
                </td>    
                <td align="center">        
                    <select id="test2">
                    </select>
                </td>
            </tr>            
        </table>        
</fieldset>
</form>

<input name="1" type="hidden" value="张三"/>
<input name="1" type="hidden" value="李四"/>
<input name="1" type="hidden" value="王五"/>
<input name="1" type="hidden" value="李六"/>

<input name="2" type="hidden" value="AAA"/>
<input name="2" type="hidden" value="BBB"/>
<input name="2" type="hidden" value="CCC"/>
<input name="2" type="hidden" value="DDD"/>

</body>
</html>
本人自己实现的两个下拉框联动效果 
 1  <html>
 2 <head>
 3   <meta charset="utf-8">
 4   <title>下拉框与下拉框之间的联动效果</title>
 5   <script language="JavaScript">
 6  function setSel(obj){
 7     //alert(obj.value+"        1111222222");
 8     var k1=obj.value;//下拉框一的值
 9     var k2=document.getElementById("test2");
10     
11     //var obj2=document.getElementsByName("inps");   //获取相同name值的属性
12     //var obj2=document.getElementsByTagName("input");   //获取所有相同的标签元素
13 
14     var len_k2=k2.length;
15     for(var i=0;i<len_k2;i++){//此处没删除一次，长度值就会发生变化，所以需要用一个变量来表示该长度值
16         k2.remove(0);//因为每次删除后，值得顺序都发生了变化，所以最好每次都删第一个元素
17     }
18     
19     var obj2=document.getElementsByName(k1);   //将一级科目的下拉框的值作为获取相同name值的变量
20     for(var i=0;i<obj2.length;i++){   //一定要用var作为声明类型
21         k2.options.add(new Option(obj2[i].value,obj2[i].value));
22     }
23 }
24   </script>
25 </head>
26 
27 <body>
28 <form>
29 <!--
30 基本方式有以下两种：
31 方式1：
32 给出菜单1的菜单数据，当点击某个菜单项后，把该项的值传给服务端，由服务端返回新的菜单数据到菜单2.
33 方式2：
34 菜单数据静态存储在js或者html元素中，当点击某个菜单项后，直接把相应的菜单数据到菜单2.
35 -->
36 <fieldset style="width:500px;margin-left:32%;margin-top:10%;">
37     <legend >下拉框与下拉框之间的联动效果</legend>
38         <table border="1" cellpadding="5px" cellspacing="0" align="center" style="margin-top:10%;margin-bottom:10%;" width="300px" height="150px">    
39             <tr>
40                 <th>一级科目</th>
41                 <th>二级科目</th>
42             </tr>    
43             <tr>                
44                 <td align="center">                 
45                     <select id="test1" onchange="setSel(this)">
46                         <option value='1'>1</option>
47                         <option value='2'>2</option>
48                     </select>
49                 </td>    
50                 <td align="center">        
51                     <select id="test2">
52                     </select>
53                 </td>
54             </tr>            
55         </table>        
56 </fieldset>
57 </form>
58 
59 <input name="1" type="hidden" value="张三"/>
60 <input name="1" type="hidden" value="李四"/>
61 <input name="1" type="hidden" value="王五"/>
62 <input name="1" type="hidden" value="李六"/>
63 
64 <input name="2" type="hidden" value="AAA"/>
65 <input name="2" type="hidden" value="BBB"/>
66 <input name="2" type="hidden" value="CCC"/>
67 <input name="2" type="hidden" value="DDD"/>
68 
69 </body>
70 </html>

 

标签：

相关文章