select標簽實現二級聯動

效果如下圖所示：

 實現的原理：使用onchange事件，原理見代碼

html代碼：

<select id="select" class="sel">
	  	<option value="weiguo">魏國</option>
	  	<option value="shuguo">蜀國</option>
	  	<option value="wuguo">吳國</option>
  	</select>
<select id="val" class="sel"></select>　　

 script代碼：

<script type="text/javascript">
    	var select = document.getElementById("select");
    	select.onchange=function(){
    		var selvalue = select.value; 
    		var val = document.getElementById("val");
    		switch(selvalue){
    			case "weiguo" : val.innerHTML="<option>荀彧</option><option>曹操</option>";break;
    			case "shuguo" : val.innerHTML="<option>劉備</option><option>諸葛亮</option>";break;
    			case "wuguo" : val.innerHTML="<option>孫權</option><option>周瑜</option>";break;
    			default : alert("erro");
    		}
    	};
</script>