select 下拉单实现二级联动（第一个选择，第二个随之改变）

效果如下图所示：

 

 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>　

javascript:

<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>

转自：

https://www.cnblogs.com/pecool/p/8059411.html