来自 JSON 的连锁州城市下拉列表

Posted

技术标签:

【中文标题】来自 JSON 的连锁州城市下拉列表【英文标题】:Chained State city dropdown list from JSON 【发布时间】:2011-02-10 06:32:32 【问题描述】:

我正在尝试填充链接的州城市选择下拉列表。我正在使用一个外部 json 文件来执行此操作,该文件由 State 及其对应的城市名称、id 和 pincode 组成。有人可以给我一些关于如何实现这一目标的想法。我需要根据州选择填充城市和密码值。提前谢谢...

JSON


"Alaska" : [
            "id": "1", "name": "Adak", "pincode": "xxx1",
            "id": "2", "name": "Akhiok", "pincode": "xxx2" ,
            "id": "3", "name": "Akiak", "pincode": "xxx3" ,           
       ],

"Arizona" : [
            "id": "4", "name": "Apache Junction", "pincode": "xxx4",
            "id": "5", "name": "Avondale", "pincode": "xxx5",
            "id": "6", "name": "Benson", "pincode": "xxx6",
        ],

"Alabama" : [
            "id" : "5", "name": "Abbeville", "pincode": "xxx7" ,
            "id" : "7", "name": "Adamsville", "pincode": "xxx8" ,
            "id" : "8", "name": "Akron", "pincode": "xxx9" ,
        ]

最终呈现的 html

<select id="state">
      <option value="1">Alaska</option>
      <option value="2">Arizona</option>
      <option value="3">Alabama</option>
      </select>

      <select id="city">
      <option value="4">Adak</option>
      <option value="5">Akhiok</option>
      <option value="6">Akiak</option>
      </select>

      <input id="pincode" type="text" />

【问题讨论】:

【参考方案1】:

我觉得你的问题很有趣,并写了相应的解决方案,你可以看到here。

代码如下:

jQuery(document).ready(function () 
    var myData;
    var onCityChange = function (e) 
        var cityData = $("option:selected", e.target).data('pincode');
        $("#pincode").val(cityData.pincode);
    ;
    var onStateChange = function (e) 
        var state = $("option:selected", e.target).text();
        if (state && myData) 
            var stateData = myData[state];
            if (stateData && stateData.length > 0) 
                $("#city").empty();
                $("#city").unbind('change');
                for (var i = 0; i < stateData.length; i++) 
                    var cityData = stateData[i];
                    var option = $('<option value="' + cityData.id + '">' + cityData.name + '</option>')
                                    .data('pincode', cityData);
                    $("#city").append(option);
                
                $("#city").bind('change', onCityChange)
                            .trigger('change');
            
        
    ;
    $.ajax(
        url: 'DependendSelectsFromJson.json',
        dataType: 'json',
        success: function (data) 
            var stateOptions = "", stateId = 1;
            for (var prop in data) 
                if (data.hasOwnProperty(prop)) 
                    stateOptions += '<option value="' + stateId + '">' + prop + '</option>';
                    stateId++;
                
            
            myData = data;
            $("#state").html(stateOptions)
                .bind('change', onStateChange)
                .trigger('change');
        
    );
);

为了访问第二个(城市)选择框的pincode,我使用了jQuery.data 函数,如果需要将一些附加信息与DOM 元素相关联,我发现它非常实用。顺便说一句,我只能保存pincode 值,但我使用该功能保存了有关城市的完整信息。

已更新:我忘了提到您发布的 JSON 数据有错误。您应该删除 ']' 之前的逗号。可能这只是将数据剪切并粘贴到问题文本中的问题。

【讨论】:

如果 json 文件在用户到达州/城市选择页面之前就已经预渲染了,如果数据集很大,它是否会有一些性能滞后?? @Sullan:您应该在您的环境中测试性能。我不知道你说的是千字节还是千兆字节的数据。如果测试将显示性能问题,您可以在第一个 ajax 调用中仅加载状态列表并在下一个 ajax 调用中加载城市,而不是使用之前保存的 myData 数组。 @Oleg 如果我想为州/省 id 添加一个参数,应该怎么办? json格式如下.. "stateid": "AB", "id": "1", "name": "Adak", "pincode": "xxx1" , @Sullan:抱歉,我不太明白你的意思。你能解释一下你需要什么吗?您是否需要更多 &lt;select&gt; 元素,例如 pincode 应该显示的附加元素? @Sullan:在我看来,信息应该更像"Alaska": "stateid": "AB", "cities": ["id": "1", "name": "Adak", "pincode": "xxx1", "id": "2", "name": "Akhiok", "pincode": "xxx2" ,"id": "3", "name": "Akiak", "pincode": "xxx3" , ... ] 。在这种情况下,您可以将有关stateId 的第一个&lt;select&gt;(“#state”)信息保存在&lt;options&gt;data 中。您可以完全按照我将信息保存到第二个 &lt;select&gt; ("#city") 的元素中的方式执行此操作。【参考方案2】:

有很多方法。

全局变量选项。

var json_object = 
"Alaska" : 

; //and the rest of other text too lazy to type :)

$('#state').change(function()
  var state =  $(this).val();
  cities = json_object[state];
  $('#city').html('');//remove the prev elements
  for(item in cities)//same as foreach in php
     $('<option value=""></option>').appendTo($('#city'));
  
);

我必须承认不完整,但给你一个粗略的想法。

其他明智的使用 ajax 像这样

$('#state').change(function()
    var url = 'ajax.php';//should return json with a list of cities only
    var state = $('#state').val();
    var data = 'state':state;
    $.ajax(
        url:url,
        data:data,
        dataType:'json',
        success: function(items)
            //do something with it
        
    )
);

您唯一需要知道的是,两者各有优缺点。

第一个选项:只能触发一个请求,但会加载大量不需要的数据。 第二种选择:请求更多但数据更少

【讨论】:

以上是关于来自 JSON 的连锁州城市下拉列表的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 jquery json 获取多个下拉列表

国家->州->城市的链式下拉菜单

国家/城市/州验证

带有 AJAX 和数据库的动态下拉列表

使用 ASP.NET Core MVC 编辑 Cascade DropDownList

如何通过从另一个下拉列表中选择值来填充下拉列表?