实现的效果为:当选择一个省的时候,会自动出现该省下的市级

效果图如下:

<body>
    <div>
            <!--界面展示-->
            <span>省份:</span>
            <select id="province" onchange="city()">
                <option value="" selected="selected">--请选择--</option>
                <option value="beijing" >北京</option>
                <option value="jiangxi" >江西</option>
                <option value="hunan" >湖南</option>
            </select>
            <span>城市:</span>
            <select id="city">
                <option value="" selected="selected">--请选择--</option>
            </select>
        </div>
</body>
<script>
    function city() {
    //通过Id获取选择的省份
    var provinceObj = document.getElementById('province');
    //根据id获取市级标签
    var cityObj = document.getElementById('city');
    var selectProvince = provinceObj.value;
    //根据选择的省份设置市级标签中的内容
    if(selectProvince == "") {
        cityObj.innerHTML = '<option value="" selected="selected">--请选择--</option>';
    } else if(selectProvince == "beijing") {
        cityObj.innerHTML = '<option value="chaoyangqu" selected="selected">朝阳区</option>' +
            '<option value="tiananmen" >天安门</option>' +
            '<option value="yiheyuan" >颐和园</option>' +
            '<option value="zijincheng" >紫禁城</option>';
    } else if(selectProvince == "jiangxi") {
        cityObj.innerHTML = '<option value="nanchang" selected="selected">南昌</option>' +
            '<option value="ganzhou" >赣州</option>' +
            '<option value="jiujiang" >九江</option>' +
            '<option value="shangrao" >上饶</option>';
    } else if(selectProvince == "hunan") {
        cityObj.innerHTML =
            '<option value="changsha" selected="selected">长沙</option>' +
            '<option value="hy" >衡阳</option>' +
            '<option value="zz" >株洲</option>' +
            '<option value="sy" >邵阳</option>';
    }
}
</script>