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="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="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="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>