前端js jqeury下拉框根据省份加载市区

解决方法：给省份一个onchange事件，当省份发生变化时，加载对应城市（我代码中使用了jquery，请自行导入）

html

省：
<select id="areaList" onchange="areaSelected()">
    <option value="">所有</option>
    <option value="浙江">浙江</option>
    <option value="山东">山东</option>
</select>
<br>
市：
<select id="area">
    <option value="">所有</option>
    <option value="杭州">杭州</option>
    <option value="金华">金华</option>
    <option value="青岛">青岛</option>
    <option value="济南">济南</option>
</select>

js

/**
 *根据省份 加载对应城市
 */
function areaSelected(){
    var areaNow=$("#areaList").val();
    $("#area").html("");
    if (areaNow=="浙江"){
        $("#area").append("        <option value=\"\">所有</option>\n" +
            "        <option value=\"杭州\">杭州</option>\n" +
            "        <option value=\"金华\">金华</option>");
    }else if (areaNow=="山东"){
        $("#area").append("        <option value=\"\">所有</option>\n" +
            "        <option value=\"青岛\">青岛</option>\n" +
            "        <option value=\"济南\">济南</option>");
    }else{
        $("#area").append("        <option value=\"\">所有</option>\n" +
            "        <option value=\"杭州\">杭州</option>\n" +
            "        <option value=\"金华\">金华</option>\n" +
            "        <option value=\"青岛\">青岛</option>\n" +
            "        <option value=\"济南\">济南</option>");
    }
}

效果展示：