省市联动(简述)

前提：需要导入 -- jquery-3.6.0.js

（用原生代码做也行,只是用jquery要精简的多）

html

<!--省类选框-->
<!--给省类选框设change事件,触发更新市值-->
<select id="省" onchange="up(this)"></select>
<!--市类选框-->
<select id="市"></select>

script

/*通过二维数组关联省市关系*/
/*省类选项 - 一维数组*/
var 省 = ["四川", "重庆", "贵州"];
/*市类选项 - 二维数组*/
var 市 = [["成都", "绵阳"],["渝中", "渝北"], ["贵阳", "遵义"]];
/*预加载默认选项*/
$(function() {
    $("#省").append("<option value='1'>===请选择===</option>");
    $("#市").append("<option value='-1'>===请选择===</option>");
    /*循环添加省类选项数组 一 将下标存入value值*/
    $.each(省, function(i, n) {
        $("#省").append("<option value='" + i + "'>" + n + "</option>");
    });
});
//省变带市变
function up(t) {
    /*获取省选框的value值(下标)*/
    var index = $(t).val();
    /*利用省类数组下标获取市选框内容*/
    var city = 市[index];
    /*省选框改变,将市选框下内容清空并更新*/
    $("#市").empty();
    $("#市").append("<option value='-1'>===请选择===</option>");
    /* 根据省类下标value值，循环添加市类选项数组*/
    $.each(city, function(i, n) {
        $("#市").append("<option>" + n + "</option>");
    });
}