使用jQuery写一个三级联动下拉框

原创

mob64ca12de24b0 2024-02-25 03:58:19 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12de24b0的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用jQuery写一个三级联动下拉框

一、整体流程

为了实现一个三级联动下拉框，我们需要按照以下步骤进行操作：

pie
    title 三级联动下拉框制作流程
    "第一步：选择省份" : 30
    "第二步：选择城市" : 40
    "第三步：选择区县" : 30

二、详细步骤

1. 选择省份

在HTML中创建一个省份的下拉框，并为其添加一个唯一的ID，例如"province"。

<select id="province">
    <option value="">--请选择省份--</option>
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="广东">广东</option>
    <!-- 其他省份选项 -->
</select>

2. 选择城市

在选择省份后，根据选择的省份，动态生成对应的城市下拉框，并为其添加一个唯一的ID，例如"city"。

// 省份改变事件
$("#province").change(function() {
    var province = $(this).val();
    // 根据选择的省份生成对应的城市下拉框
    if(province === "北京") {
        $("#city").html('<option value="">--请选择城市--</option><option value="北京市">北京市</option>');
    } else if(province === "上海") {
        $("#city").html('<option value="">--请选择城市--</option><option value="上海市">上海市</option>');
    } else if(province === "广东") {
        $("#city").html('<option value="">--请选择城市--</option><option value="广州市">广州市</option><option value="深圳市">深圳市</option>');
    } 
    // 其他省份的城市选项
});

3. 选择区县

在选择城市后，根据选择的城市，动态生成对应的区县下拉框，并为其添加一个唯一的ID，例如"district"。

// 城市改变事件
$("#city").change(function() {
    var city = $(this).val();
    // 根据选择的城市生成对应的区县下拉框
    if(city === "北京市") {
        $("#district").html('<option value="">--请选择区县--</option><option value="东城区">东城区</option><option value="西城区">西城区</option>');
    } else if(city === "上海市") {
        $("#district").html('<option value="">--请选择区县--</option><option value="黄浦区">黄浦区</option><option value="徐汇区">徐汇区</option>');
    } else if(city === "广州市") {
        $("#district").html('<option value="">--请选择区县--</option><option value="越秀区">越秀区</option><option value="天河区">天河区</option>');
    } 
    // 其他城市的区县选项
});