如何让Select2在国家/地区值更改时更新ajax调用

How to get Select2 to update a ajax call when country value is changed

本文关键字：更新 调用 ajax 地区 Select2 国家      更新时间：2023-09-26

我似乎找不到一个简单的例子来说明如何在国家/地区列表发生变化时更新州列表。我看到的所有例子都使用了各种各样的钻头和配件，这些钻头和配件的工作取决于版本和给出解决方案的人。

有人能帮助我如何在没有丑陋的黑客攻击的情况下轻松完成这项工作吗。到目前为止，我已经尝试过了，虽然它有效，但如果我第二次更改下拉列表，新值只会附加到旧值上，而不是替换它们。我尝试过破坏和重建，但旧的价值观依然存在。

从服务器返回的数据是带有id和文本值的有效json。到目前为止，当国家更改时，我没有幸运地让州列表更新为新的国家-州值

   <select id="country" name="country" class="form-control" data-placeholder="Select...">
   <optgroup label="Country">
        <option></option>
        <option value="US" > United States</option>
        <option value="AU" > Austrailia</option>
   </optgroup>
   </select>

   <select id="state" name="state" class="form-control" data-placeholder="Select...">
   <optgroup label="State">
      <option></option>
   </optgroup>
   </select>   


   $("#country").select2().on("change", function(e) {
        var country = e.val;
        $.post("states", {
          country_id: country
        }, function(e) {
          if (e)
              $("#states").select2({
                data: e
              });
        })          
   });

   $("#state").select2();

这些是从服务器发回的值

   [{ id: 'ALB', text: 'ALABAMA' }, { id: 'ALS', text: 'ALASKA' }, { id: 'ARI', text: 'ARIZONA' }]

在设置新数据之前，您必须从select中删除<option>标记：

$.post("states", {
    country_id: country
  }, function(e) {
     if (e){
       $("#states option").remove();
       $("#states").select2({
           data: e
        });
     }
})

您可能需要完善我的示例，以避免删除占位符（如果有的话）。

另请参阅此JSFiddle：https://jsfiddle.net/drj84go5/

最好的选择是输入（文本）而不是select2，然后使用ajax通过select2函数进行转换。

输入：

<input type="text" id="states">

Javascript：

$('#states').select2({
    placeholder: "States...", // placeholder
    allowClear: true,
    minimumInputLength: 0,
    dropdownCssClass: "bigdrop",
    width: '100%',
    ajax: {
        quietMillis: 2500,
        url: "/Search/_SearchStates", // Server-side action
        dataType: 'json',
        data: function (term, page) {
            return {
                Text: term, // Text to search for
                CountryId: $("#country").val(), // CountryId from #countries
            };
        },
        results: function (data, page) {
            return { results: data };
        },
    },
    formatResult: function (item) {
        return item.StateName; // Table name/description
    },
    id: function (element) {
        return element.StateId; // Table id/code
    },
    formatSelection: function (item) {
        return item.StateName; // Table name/description
    }
});

您需要有一个服务器端操作，它将为您提供状态列表。

要获得StateId，您需要执行以下操作：

$("#states").select2('val');
相关文章：