首页 > 代码库 > JS 下拉菜单联动

JS 下拉菜单联动

示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>select联动</title>
<script language="javascript">
   function selct(arr){
     var toList = document.form1.elements["slt2"];
     var toLen = toList.options.length;
       //清空列表
      if(toLen>=0){
      toList.options.length =0;
      toLen=0;
      }
          for(var i=0;i<arr.length;i++){
               var opn = new Option(arr[i],i);
                   toList.options[toLen] =opn;
                     toLen++;
                           }
                              }            
    function updateSelect(str){
    switch(str){
        case "1":selct(new Array("朝天门","解放碑","沙坪坝","观音桥","南坪","高新区"));break;
        case "2":selct(new Array("上海市1","上海市2","上海市3","上海市4","上海市5"));break;
            case "3":selct(new Array("南温泉","北温泉","西温泉","东温泉","北京市"));break;    
            }}           
</script>
</head>
<body>
 <form name="form1"  method="POST">
        请选择省份:
        <select id="slt1" onChange="updateSelect(this.value)">
             <option value="">请选择地市</option>
            <option value="http://www.mamicode.com/1">重庆市</option>
            <option value="http://www.mamicode.com/2">上海市</option>
            <option value="http://www.mamicode.com/3">北京市</option>
        </select>
        地市:
        <select id="slt2">
            <option value="">请选择地市</option>
        </select>
    </form>
</body>
</html>
效果图:

wKiom1SLFpixx0MsAAAtaWfN5hM793.jpg

本文出自 “老牛Java” 博客,请务必保留此出处http://liuyj.blog.51cto.com/2340749/1589504

JS 下拉菜单联动