Select标签下拉列表二级联动级联实例代码


<!DOCTYPE html>
<html>
<head>
    <title>Select 二级联动示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<label for="province">省份:</label>
<select id="province" onchange="loadCities()">
    <option value="">请选择省份</option>
    <option value="zhejiang">浙江</option>
    <option value="jiangsu">江苏</option>
    <!-- 可以继续添加更多省份 -->
</select>

<label for="city">城市:</label>
<select id="city">
    <option value="">请先选择省份</option>
</select>

<script>
function loadCities() {
    var province = $("#province").val();
    $("#city").empty(); // 清空城市下拉列表
    if (province) {
        $.ajax({
            url: '/get-cities', // 假设的服务器端接口
            type: 'GET',
            data: { province: province },
            dataType: 'json',
            success: function(data) {
                $.each(data, function(index, city) {
                    $("#city").append('<option value="' + city.id + '">' + city.name + '</option>');
                });
            }
        });
    } else {
        $("#city").append('<option value="">请先选择省份</option>');
    }
}

// 注意：这里的'/get-cities'是一个示例URL，你需要替换成实际提供城市数据的服务器端接口
</script>

</body>
</html>
**说明**：
- 这是一个简单的HTML页面，包含了两个`