jquery省市区插件选择，地址选择（仿某东简单编写）

以下是一个使用jQuery实现的省市区选择插件的简单示例。由于某东的地址选择比较复杂，这里我们只实现省市区的选择功能。

首先，确保你的页面中引入了jQuery库。

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市区选择插件</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <select id="province">
        <option value="">选择省份</option>
    </select>
    <select id="city">
        <option value="">选择城市</option>
    </select>
    <select id="district">
        <option value="">选择区域</option>
    </select>
 
    <script src="address-picker.js"></script>
</body>
</html>

jQuery插件（address-picker.js）:




$.fn.addressPicker = function() {
    // 模拟省市区数据
    var regions = {
        "广东": ["广州", "深圳", "珠三角"],
        "浙江": ["杭州", "宁波", "浙江中部"],
        "北京": ["北京市", "北京周边"]
    };
 
    // 初始化省份选择
    var $province = this.filter('#province').on('change', function() {
        var province = $(this).val();
        var $city = $('#city').empty();
        $city.append($('<option>').text('选择城市'));
        if (regions[province]) {
            regions[province].forEach(function(city) {
                $city.append($('<option>').val(city).text(city));
            });
        }
    });
 
    // 初始化城市选择
    var $city = this.filter('#city').on('change', function() {
        var city = $(this).val();
        var $district = $('#district').empty();
        $district.append($('<option>').text('选择区域'));
        if (regions[province] && regions[province].indexOf(city) > -1) {
            ['区', '县', '镇'].forEach(function(area) {
                $district.append($('<option>').val(city + area).text(city + area));
            });
        }
    });
 
    return this; // 支持链式调用
};
 
// 使用插件
$(function() {
    $('#province, #city, #district').addressPicker();
});

这个插件模拟了省市区的选择，当选择省份后，相应的城市会出现在城市选单中，选择城市后，区域选单会出现相应的区域。这个例子简单易懂，但不包括某东那样复杂的地址选择逻辑。实际应用中，你需要根据实际的数据结构来填充选单。

jquery省市区插件选择，地址选择（仿某东简单编写）

评论已关闭

推荐阅读