很简单的js下拉框联动

最新推荐文章于 2024-07-03 00:07:29 发布

weixin_34096182

最新推荐文章于 2024-07-03 00:07:29 发布

阅读量118

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/2444023/blog/736468

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Untitled Document</title>  
<script>  
function setSecond(obj){  
    var val = obj.value;  
    if(val == 'en'){  
        var sec = document.getElementById('second');  
        sec.innerHTML = "<option>one</option><option>two</option>";  
    }else{  
        var sec = document.getElementById('second');  
        sec.innerHTML = "<option>一</option><option>二</option>";  
    }     
}  
</script>  
</head>  
  
<body>  
<div>   
    <select id="first" onchange="setSecond(this)">  
        <option value="en">en</option>  
        <option value="zh">zh</option>  
    </select>   
</div>  
<div>   
    <select id="second">  
  
    </select>   
</div>  
</body>  
</html>

简单效果图：

使用innerHTML，IE浏览器不支持这种方法的，所以改进方法：

<!DOCTYPE html>
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Untitled Document</title>  
<script>  
function setSecond(obj){  
    var val = obj.value;  
    if(val == 'en'){  
        var sec = document.getElementById('second');  
        sec.options[0] = new Option("one","one");  
        sec.options[1] = new Option("two","two");  
    }else{  
        var sec = document.getElementById('second');  
        sec.options[0] = new Option("一","one");  
        sec.options[1] = new Option("二","two");//可设置循环配置，也可一个一个配置  
    }     
}  
</script>  
</head>  
  
<body>  
<div>   
    <select id="first" onchange="setSecond(this)">  
        <option value="en">en</option>  
        <option value="zh">zh</option>  
    </select>   
</div>  
<div>   
    <select id="second">  
  
    </select>   
</div>  
</body>  
</html>

__________________________________________________________________

我写的task7

function setSecond(obj){  
    var val = obj.value;  
    if(val == '中国'){  
        var sec = document.getElementById('province');  
        sec.options[0] = new Option("北京","one");  
        sec.options[1] = new Option("天津","two");  
    }else{  
        var sec = document.getElementById('province');  
        sec.options[0] = new Option("one","one");  
        sec.options[1] = new Option("two","two");//可设置循环配置，也可一个一个配置  
    }   
}  



function setSecond1(obj){  
    var val = obj.value;  
    if(val == '北京'){  
        var sec = document.getElementById('city');  
        sec.options[0] = new Option("朝阳","one");  
        sec.options[1] = new Option("海淀","two");  
    }else if(val == '天津'){  
        var sec = document.getElementById('city');  
        sec.options[0] = new Option("南开","one");  
        sec.options[1] = new Option("河西","two");//可设置循环配置，也可一个一个配置  
    }     
} 




<form>
    	            <div class="select">
    	              <select name="country" onchange="setSecond(this)">
    	                <option value="" selected="selected">国家</option>
    	                <option value="中国">中国</option>
    	              </select>
    	            </div>
    	            <div class="select">
    	              <select id="province" onchange="setSecond1(this)">
							<option value="北京" selected="selected">北京</option>
    	                <option value="天津">天津</option>
					  </select>
					</div>
					<div class="select">
    	              <select id="city">
    	              
    	              </select>
    	            </div>
    	            <button type="submit" id="submit">搜&nbsp;&nbsp;&nbsp;&nbsp;索</button>
    	        </form>

转载于:https://my.oschina.net/u/2444023/blog/736468