Js实现简单的省市级联的效果

浏览数：44 / 时间：2015年06月09日

需要注意的是当需要动态添加项的时候一定要
先var newoption=new Option("项","值");
然后再 select.options.add(newoption);
这样才能添加进去
代码如下：

<html>
<head>
<script language="javascript">
 function changeSever()
 {
  var newop1,newop2;                              //声明两个变量用来添加Option项
  switch(document.form1.select1.value)            //判断选择的项,注意这里是值不是所选的项,是所选项的值
  {
   case "lt":
    newop1=new Option("雷霆1区","lt1");
    newop2=new Option("雷霆2区","lt2");
    break;
   case "ty":
    newop1=new Option("天涯1区","lt1");
    newop2=new Option("天涯2区","lt2");
    break;
  }
  document.form1.select2.options.length=0;          //把所有的项清空
  document.form1.select2.options.add(new Option("请选择相应的服务器"));
  document.form1.select2.options.add(newop1);       //添加项
  document.form1.select2.options.add(newop2);
 }
</script>
</head>

<body>
<form name="form1" method="post" action="">
  <select name="select1" onChange="changeSever()">         //父下拉框
    <option selected>请选择所在区</option>
    <option value="lt">雷霆</option>
    <option value="ty">天涯</option>
  </select>
  <p><select name="select2">                             //子下拉框
    <option>请选择服务器</option>
  </select>
</form>

</body>
</html>