JS省市下拉菜单-罗分明网络博客

示图
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        window.onload = function () {
            var datas = {
                '广东': ['珠海', '深圳', '广州'],
                '江西': ['九江', '南昌', '景德镇'],
                '浙江': ['杭州', '金华', '衢州']
            }
            var sheng = document.getElementById('s1');
            //把省加载到option
            for (var key in datas) {
                var op = document.createElement('option');
                op.value = key;
                op.innerHTML = key;
                sheng.appendChild(op);
            }
            var shi = document.getElementById('s2');
            //省发生改变动时发生事件
            sheng.onchange = function () {
                //清除市的option
                while (shi.firstChild) {
                    shi.firstChild.remove();
                }
                for( var i=0;i<datas[sheng.value].length;i++){
                    var op = document.createElement('option');
                    op.value = datas[sheng.value][i];
                    op.innerHTML = datas[sheng.value][i];
                    shi.appendChild(op);
                }
            }
            sheng.onchange();//首次加载时调用
        }
    </script>
</head>
<body>
    省：<select id="s1"></select>
    市：<select id="s2"></select>
</body>
</html>