解决下拉菜单默认的问题
这是完整个的代码下面95行里面的else我想判断
哪个父级点级了默认他下面的子级就都跟着变成默认，怎么处理
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 select{margin:3px;} 8 </style> 9 <script type="text/javascript"> 10 window.onload=function(){ 11 var s1=new Sel("div1"); 12 s1.add("0",['广东','北京','上海']); 13 14 s1.add("0_0",['珠海','广州','深圳']); 15 s1.add("0_0_0",['香洲区','斗门区','平沙区']); 16 s1.add("0_0_1",['黄埔区','天河区','花都区']); 17 s1.add("0_0_2",['南山区','宝安','东门区']); 18 19 20 s1.add("0_1",['五环','朝阳','城区']); 21 s1.add("0_1_0",['四环','三环','二环']); 22 s1.add("0_1_1",['朝南','朝东','朝北']); 23 s1.add("0_1_2",['东城区','西城区','南城区']); 24 25 s1.add("0_2",['浦东','浦西','浦南']); 26 s1.add("0_2_0",['浦东1','浦东2','浦东3']); 27 s1.add("0_2_1",['浦西1','浦西2','浦西3']); 28 s1.add("0_2_2",['浦南1','浦南2','浦南3']); 29 s1.init(3); 30 }; 31 32 function Sel(id){ 33 this.oParent=document.getElementById(id); 34 this.data={}; 35 this.aSel=this.oParent.getElementsByTagName("select"); 36 } 37 38 Sel.prototype={ 39 40 init:function(now){ 41 var This=this; 42 for(var i=1;i<=now;i++){ 43 var oSel=document.createElement("select"); 44 var oPt=document.createElement("option"); 45 oPt.innerHTML="默认"; 46 oSel.index=i; 47 oSel.appendChild(oPt); 48 this.oParent.appendChild(oSel); 49 oSel.onchange=function(){ 50 This.change(this.index); 51 } 52 } 53 this.first(); 54 }, 55 56 add:function(key,value){ 57 this.data[key]=value; 58 }, 59 60 first:function(){ 61 var arr=this.data["0"]; 62 for(var i=0;i<arr.length;i++){ 63 var oPt=document.createElement("option"); 64 oPt.innerHTML=arr[i]; 65 this.aSel[0].appendChild(oPt); 66 } 67 }, 68 69 change:function(iNow){ 70 str="0"; 71 for(var i=0;i<iNow;i++){ 72 str+="_"+(this.aSel[i].selectedIndex-1); 73 } 74 75 76 if(this.data[str]){//有数据 77 var arr=this.data[str]; 78 79 this.aSel[iNow].options.length=1; 80 81 for(var i=0;i<arr.length;i++){ 82 var oPt=document.createElement("option"); 83 oPt.innerHTML=arr[i]; 84 this.aSel[iNow].appendChild(oPt); 85 } 86 87 !(this.aSel[iNow].options[1].selected=true); 88 89 iNow++; 90 91 //if(iNow<this.aSel.length){ 92 this.change(iNow); 93 //} 94 95 }else{//没数据 96 97 //if(this.aSel[iNow].options[0].selected=true){ 98 // this.aSel[iNow].options.length=1; 99 //} 100 101 } 102 }, 103 } 104 105 </script> 106 107 </head> 108 109 <body> 110 <div id="div1"> 111 </div> 112 </body> 113 </html>
叮当猫咪浏览 431回答 6
6回答
-
慕森卡
if(iNow<this.aSel.length){ for(var i=iNow;i<=this.aSel.length;i++){ this.aSel[i].options.length=1; } } -
largeQ
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> select { margin: 3px; } </style> <script type="text/javascript"> window.onload=function(){ var s1=new Sel("div1"); s1.add("0",['广东','北京','上海']); s1.add("0_0",['珠海','广州','深圳']); s1.add("0_0_0",['香洲区','斗门区','平沙区']); s1.add("0_0_1",['黄埔区','天河区','花都区']); s1.add("0_0_2",['南山区','宝安','东门区']); s1.add("0_1",['五环','朝阳','城区']); s1.add("0_1_0",['四环','三环','二环']); s1.add("0_1_1",['朝南','朝东','朝北']); s1.add("0_1_2",['东城区','西城区','南城区']); s1.add("0_2",['浦东','浦西','浦南']); s1.add("0_2_0",['浦东1','浦东2','浦东3']); s1.add("0_2_1",['浦西1','浦西2','浦西3']); s1.add("0_2_2",['浦南1','浦南2','浦南3']); s1.init(3); }; function Sel(id){ this.oParent=document.getElementById(id); this.data={}; this.aSel=this.oParent.getElementsByTagName("select"); } Sel.prototype={ init:function(now){ var This=this; for(var i=1;i<=now;i++){ var oSel = document.createElement("select"); oSel.id = "select" + i; var oPt=document.createElement("option"); oPt.innerHTML="默认"; oSel.index=i; oSel.appendChild(oPt); this.oParent.appendChild(oSel); oSel.onchange=function(){ This.change(this.index); } } this.first(); }, add:function(key,value){ this.data[key]=value; }, first:function(){ var arr=this.data["0"]; for(var i=0;i<arr.length;i++){ var oPt=document.createElement("option"); oPt.innerHTML=arr[i]; this.aSel[0].appendChild(oPt); } }, change:function(iNow){ str="0"; for(var i=0;i<iNow;i++){ str+="_"+(this.aSel[i].selectedIndex-1); } if(this.data[str]){//有数据 var arr=this.data[str]; this.aSel[iNow].options.length=1; for(var i=0;i<arr.length;i++){ var oPt=document.createElement("option"); oPt.innerHTML=arr[i]; this.aSel[iNow].appendChild(oPt); } !(this.aSel[iNow].options[1].selected=true); iNow++; //if(iNow<this.aSel.length){ this.change(iNow); //} } else {//没数据 if(str=="0_-1") { var s1 = document.getElementById("select2"); var s2 = document.getElementById("select3"); s1.options[0].selected = true; s2.options[0].selected = true; } //if(this.aSel[iNow].options[0].selected=true){ // this.aSel[iNow].options.length=1; //} } }, } </script> </head> <body> <div id="div1"> </div> </body> </html> 略死板，但是解决了就行，我也不知道为什么。但是这样就是可以。应该是你想要的。 -
慕哥6287543
我想要自动的，万一有无限下拉的话这样做就不行啦！！！ -
一只甜甜圈
@小鬼文: 没明白你说的无限下拉的概念。是还有后续的select还是什么。 -
HUH函数
@神叨大侠: 嗯！！就是后续还有select -
开满天机
@小鬼文: 那就不用ID，给除第一个之外后续的select同一个样式。通过样式选择器找到后续所有的select对象，循环。设置选中第一个默认！稍微变通下就可以了！多少个都没问题！代码我就不给你写了额，自己按思路去敲！
随时随地看视频慕课网APP
相关分类
JavaScript