Question

我似乎无法找到一个简单的示例，说明如何在国家/地区列表更改时更新状态列表。我看到的所有示例都使用了各种各样的位和peices，这取决于版本和谁提供解决方案。

有人可以帮助我如何在没有丑陋黑客的情况下轻松完成这项任务。到目前为止我已经尝试了这个，虽然它有效但是如果我第二次更改下拉列表，新值只会附加到旧值而不是替换它们。我曾尝试过摧毁和重建，但旧的价值观仍然存在。

从服务器返回的数据是带有id和text值的有效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' }]

Answer 1

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

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

您可能希望优化我的示例以避免删除占位符（如果有）。

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

Answer 2

最好的选择是让输入（文本）不是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');

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

2 个答案: