下拉框與下拉框之間的聯動效果

時間 2021-08-15

標籤 html ide this spa firefox orm htm utf-8 欄目 HTML 简体版

原文原文鏈接

 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。