jquery 地址四级联级显示 不默认选择

在jQuery中,实现地址四级联动并且不默认选择任何地址,可以通过监听每级联动的选择事件,然后根据选择的结果动态更新下一级的选项列表。以下是一个简单的例子:

HTML结构示例:




<select id="province">
    <option value="">选择省份</option>
</select>
<select id="city">
    <option value="">选择城市</option>
</select>
<select id="district">
    <option value="">选择区/县</option>
</select>
<select id="street">
    <option value="">选择街道</option>
</select>

jQuery代码示例:




$(document).ready(function() {
    var provinceData = {
        "110000": ["北京市"],
        "120000": ["天津市"],
        // ... 其他省份数据
    };
    var cityData = {
        "110100": ["市区"],
        "110200": ["县城"],
        // ... 其他城市数据
    };
    var districtData = {
        "110101": ["东城区"],
        "110102": ["西城区"],
        // ... 其他区/县数据
    };
    var streetData = {
        "110101001": ["东城区街道1"],
        "110101002": ["东城区街道2"],
        // ... 其他街道数据
    };
 
    var updateCity = function(provinceId) {
        var cities = provinceData[provinceId] || [];
        $('#city').empty();
        $.each(cities, function(index, city) {
            $('#city').append($('<option>').text(city).val(city.substring(0, 4) + '0000'));
        });
        updateDistrict($('#city').val());
    };
 
    var updateDistrict = function(cityId) {
        var districts = cityData[cityId] || [];
        $('#district').empty();
        $.each(districts, function(index, district) {
            $('#district').append($('<option>').text(district).val(district.substring(0, 6) + '00'));
        });
        updateStreet($('#district').val());
    };
 
    var updateStreet = function(districtId) {
        var streets = streetData[districtId] || [];
        $('#street').empty();
        $.each(streets, function(index, street) {
            $('#street').append($('<option>').text(street).val(street.substring(0, 12)));
        });
    };
 
    $('#province').change(function() {
        updateCity(this.value);
    });
 
    $('#city').change(function() {
        updateDistrict(this.value);
    });
 
    $('#district').change(function() {
        updateStreet(this.value);
    });
 
    // 初始化时不默认选择任何地址
    updateCity(''); // 更新城市列表
    updateDistrict(''); // 更新区/县列表
    updateStreet(''); // 更新街道列表
});

在这个例子中,我们定义了四个下拉菜单,分别用于选择省份、城市、区/县和街道。我们还定义了四个数据对象,分别用于存储省份、城市、区/县和街道的数据。然后我们定义了更新下级列表的函数,并在每个级别的下拉菜单中的change事件处理

最后修改于:2024年08月21日 15:41

评论已关闭

推荐阅读

DDPG 模型解析,附Pytorch完整代码
2024年11月24日
DQN 模型解析,附Pytorch完整代码
2024年11月24日
AIGC实战——Transformer模型
2024年12月01日
Socket TCP 和 UDP 编程基础(Python)
2024年11月30日
python , tcp , udp
如何使用 ChatGPT 进行学术润色?你需要这些指令
2024年12月01日
AI
最新 Python 调用 OpenAi 详细教程实现问答、图像合成、图像理解、语音合成、语音识别(详细教程)
2024年11月24日
ChatGPT 和 DALL·E 2 配合生成故事绘本
2024年12月01日
omegaconf,一个超强的 Python 库!
2024年11月24日
【视觉AIGC识别】误差特征、人脸伪造检测、其他类型假图检测
2024年12月01日
[超级详细]如何在深度学习训练模型过程中使用 GPU 加速
2024年11月29日
Python 物理引擎pymunk最完整教程
2024年11月27日
MediaPipe 人体姿态与手指关键点检测教程
2024年11月27日
深入了解 Taipy:Python 打造 Web 应用的全面教程
2024年11月26日
基于Transformer的时间序列预测模型
2024年11月25日
Python在金融大数据分析中的AI应用(股价分析、量化交易)实战
2024年11月25日
AIGC Gradio系列学习教程之Components
2024年12月01日
Python3 `asyncio` — 异步 I/O,事件循环和并发工具
2024年11月30日
llama-factory SFT系列教程:大模型在自定义数据集 LoRA 训练与部署
2024年12月01日
Python 多线程和多进程用法
2024年11月24日
Python socket详解,全网最全教程
2024年11月27日