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

我似乎找不到一个简单的例子来说明如何在国家列表发生变化时更新国家列表。我看到的所有例子都使用了各种各样的BIT和PEICE，它们的工作取决于版本和谁给出了解决方案

有没有人能帮助我，这是如何可以很容易地做到没有丑陋的黑客。到目前为止，我已经尝试过这个方法，虽然它有效，但如果我第二次更改下拉列表，新值只会附加到旧值上，而不是替换它们。我尝试过破坏和重建，但旧的价值观依然存在

从服务器返回的数据是具有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();

---

在设置新数据之前，您必须从选择中删除

标记：

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

您可能希望改进我的示例，以避免删除占位符（如果有的话）

---

另请参见此JSFIDLE:

最好的选择是使用一个输入（文本）而不是select2，然后使用ajax通过select2函数将其转换

输入：

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

您需要有一个服务器端操作来提供状态列表

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

$("#states").select2('val');

$('#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
    }
});

$("#states").select2('val');