如何实现列表框内容的制约?请教！

Question

服务器端：根据主下拉框中的数据和联动下拉框中的数据构造一个(parentId,childArray)的数据结构。其中：
parentId为主下拉框中的value；
childArray为联动下拉框中的数组数据(数组中的元素为一个string，该string包含value和text的字符串，用","分隔)。
再建立一个数组，将上面构造的数据结构放到数组里面，将该数组传到客户端。客户端：构建一个联动下拉框中的value和text的数据对象dataObject(aChildId, aText)和一个与parentId关联的对象arrayObject(parentId, aArray)
在主下拉框中的onchange事件中判断当前主下拉框中的value，根据该value，循环读取数组就能得到联动下拉框中要显示的数据。只考虑客户端的代码(就是将数据都写到客户端,服务器端的话只要构造上述的数据结构就可以了)：
 <script language="javascript">
  //构造数据结构
  var dropArray = new Array(2);
  var childArray1 = new Array(3);
  var childArray2 = new Array(2);
  function dataObject(aChildId, aText) {
   this.childId = aChildId;
   this.text = aText;
  }
  
  function arrayObject(aParentId, aArray) {
   this.parentId = aParentId;
   this.array = aArray;
  }
  
  childArray1[0] = new dataObject("cs","长沙");
  childArray1[1] = new dataObject("sy","邵阳");
  childArray1[2] = new dataObject("xt","湘潭");
  
  childArray2[0] = new dataObject("km","昆明");
  childArray2[1] = new dataObject("bn","西双版纳");
  
  dropArray[0] = new arrayObject("hn",childArray1);
  dropArray[1] = new arrayObject("yn",childArray2);
  
  function cascadeDrop(srcSelect, destSelect) {
   var parentValue = srcSelect.options[srcSelect.selectedIndex].value;
   if(parentValue != "") {//如果没有选择主下拉框中的元素.
    for(var i = 0; i < dropArray.length; i++) {
     if(parentValue == dropArray[i].parentId) {
      destSelect.options.length = 0;//清空联动下拉框.
      var destArray = dropArray[i].array;
      for(var j = 0; j < destArray.length; j++) {
       var destValue = destArray[j].childId;
       var destText = destArray[j].text;
       
       destSelect.options[j] = new Option(destText, destValue);
      }
     }
    }
   } else {
       destSelect.options.length = 0;//清空联动下拉框.
      destSelect.options[0] = new Option(" - None selected - ","");
  }
  }
  
 </script>
 
<table>
<tr>
<td>province</td>
<td>
<select style="width=150" onChange="cascadeDrop(this, city)">
<option value=""> - None selected - </option>
<option value="hn"> 湖南</option>
<option value="yn">云南</option>
</select>
</td>
</tr>
<tr>
<td>city</td>
<td>
<select id="city" style="width=150">
<option value=""> - None selected - </option>
</select>
</td>
</tr></table>
</body>
</html>

Answer 1

这个和动态菜单中的分级处理一样，比如每个市都是6位字符串表示用4位字符串表示省，用两位表示国家，比如成都可以表示为cnsccd而cn表示国家cnsc表示四川，这样你可以通过逐级细化确定一个市，他们的代码也有关联，方便处理。

Answer 2

看看下面的例子：<SCRIPT LANGUAGE="JavaScript">
 var sSele=new Array;
 sSele[0]='Obj.add(Option("南京","0"));Obj.add(Option("苏州","1"));Obj.add(Option("无锡","2"));';
 sSele[1]='Obj.add(Option("济南","0"));Obj.add(Option("青岛","1"));Obj.add(Option("烟台","2"));';
</SCRIPT><FORM>
<SELECT ONCHANGE="Obj=this.form.city; Obj.innerHTML=''; eval(sSele[this.value]);">
 <OPTION VALUE="0">江苏
 <OPTION VALUE="1">山东
</SELECT><SELECT NAME="city">
</SELECT>
</FORM><SCRIPT LANGUAGE="JavaScript1.2">
 var Obj=document.forms(0).city;
 eval(sSele[0]);
</SCRIPT>

Answer 3

smallyear(颠狂柳絮)的方法好理解一点，
Sunlily(阳光)的程序看起来简洁点，不过不大理解!
还有，如何实现多级联动呢(上面的例了好像只实现二级联动)？
我现在要实现的问题涉及到五级啊(很复杂!)
比如：洲->国家->省份->城市->区/县
多谢!
学习!

Answer 4

修改一下smallyear(颠狂柳絮)的程序：
//因为是多级联动，所以得有三种数据结构，分别是首个，中间个(设总级数为n,则为n-2个)，和尾个
  function dataLast(aChildId, aText) 
  {
   this.childId = aChildId;
   this.text = aText;
  }
    
  function dataMiddle(aChildId, aText, aArray) 
  {
   this.childId = aChildId;
   this.text = aText;
   this.array = aArray;
  }
  
  function arrayFirst(aParentId, aArray) 
  {
   this.parentId = aParentId;
   this.array = aArray;
  }
  function cascadeDrop(parentArray,srcSelect,destSelect,childArray)
   {
   var parentValue = srcSelect.options[srcSelect.selectedIndex].value;
   if(parentValue != "")
{//如果没有选择主下拉框中的元素.
for(var i = 0; i < parentArray.length; i++)
 {
 if(parentValue == parentArray[i].parentId)
  {
  destSelect.options.length = 0;//清空联动下拉框.
  var destArray = parentArray[i].array;
  for(var j = 0; j < destArray.length; j++)
   {
   var destValue = destArray[j].childId;
   var destText = destArray[j].text;
   
   destSelect.options[j] = new Option(destText, destValue);
 　 }
 //childArray将是下一个调用本函数的parentArray参数的值，
// 此处我真不出如何对childArray操作，甚至不知这样是否可行。
// 简化一下我的思路：两次调用f(a,b)，第二次的a是第一次的b.函数这们操作合法吗？
}
　}
  　}
    else
 {
   destSelect.options.length = 0;//清空联动下拉框.
  destSelect.options[0] = new Option(" - None selected - ","");
  }
  }
其它的代码相似!
请帮我看看我修改的function cascadeDrop，我注释的部分还缺少程序，如何补上(给出进一步的思路也好)，多谢指点!谢谢!

Answer 5

谁能帮我解释一下这段程序：
<BODY> 
<SELECT NAME="s1"></SELECT> 
<SELECT NAME="s2"></SELECT> 
<SELECT NAME="s3"></SELECT> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
//选择框的名字 
selector = [ "s1", "s2", "s3"]; 
//选择项: "名字", "值", 子选择 
menu = [ 
"地球","1", 
[ 
"中国","86", 
 [ 
 "北京","BJ",null, 
 "四川","SC",null
 ], 
"美国","1", 
 [ 
 "加利福尼亚","CA",null, 
 "华盛顿","WA",null 
 ] 
], 
"火星","2", 
[ 
"大峡谷","86", 
 [ 
 "小山丘","BJ",null,
 "大山丘","BFJ",null 
 ] ,
 "小峡谷","826", null
] 
]; function wizz(level) 
{ 
if( level == 0 ) 
 a = menu; 
else 
{ 
 str = "menu"; 
 for( i=0; i<level; i++ ) 
  str += "[" + (document.all[selector[i]].selectedIndex * 3 + 2)  + "]"; 
 a = eval(str); 
} 
if( a == null ) return; 
s = document.all[selector[level]]; 
i = s.length; 
while( i > 0 ) s.options[--i] = null; 
while( i < Math.floor(a.length/3) ) 
 s.options[i] = Option( a[i*3], a[i++*3+1] ); 
s.onchange = Function("wizz(" + (level+1) + ")"); 
wizz(level+1); 
} 
wizz(0); 
//--> 
</SCRIPT> 
</BODY> 
</HTML> 
程序的问题是，当选择一个没有下级联动子菜单的时候，子菜将显示之前父菜单的子菜单内容。
如选择了大峡谷（其子菜单有：大山岳，小山岳），再选择小峡谷时，本来其子菜单是没内空的，但这时子菜单依然显示大山丘，小山丘。
如何修改程序！谢谢！