Select2选项未能正确更新

Question

我正在尝试在我的网站上构建“国家-州-城市”功能，其中“州”和“城市”选择框被禁用，一旦用户选择一个“国家”，它就会显示该国家的各个州以及其他信息。 我遇到的问题是，一旦显示了特定国家的状态输入，然后如果我更改国家，则还会显示新国家的状态，但同时也会显示以前国家的状态。

function states_data(loc_data, selectedCountry) {
    var _states_array = [];
    var states = loc_data[selectedCountry];
    for (i = 0; i < states.length; i++) {
        _states_array.push({
            id: states[i],
            text: states[i]
        })
    }
    return _states_array
}

function _cities(state) {
    var val = Math.floor((Math.random() * 100) + 1);
    return [{
        id: val + state,
        text: val + state
    }];
}
var loc_data = {
    'USA': ['USA State 1', 'USA State 2', 'USA State 3'],
    'Australia': ['AUS State 1', 'AUS State 2']
}

$('#loc_state').select2({
    placeholder: "Select a state",
    disabled: true
}).on('change', function() {
    var selectedState = $(this).val();
    $('#loc_city').select2({
        disabled: false,
        placeholder: "Select a city",
        allowClear: true,
        data: _cities(selectedState)  //it should delete previous values and update new ones.
    });
}).trigger('change');

$('#loc_city').select2({
    placeholder: "Select a city",
    disabled: true
});

var countries_data = [];
for (var key in loc_data) {
    countries_data.push({
        id: key,
        text: key
    });
}

$('#loc_country').select2({
    placeholder: "Select a country",
    allowClear: true,
    data: countries_data
}).on('change', function() {
    var selectedCountry = $(this).val();
    $('#loc_state').select2({
        disabled: false,
        placeholder: "Select a state",
        allowClear: true,
        data: states_data(loc_data, selectedCountry) //it should delete previous values and update new ones.
    });
}).trigger('change');

如果您选择美国，则会显示美国的州，但如果您将其更改为澳大利亚，则会显示澳大利亚的州，但是美国的州也在那里，它们根本没有被删除。 问题可能是什么？ 如果用户取消选择国家字段，如何从州和城市中删除所有选择？

- Jon L

Answer 1

使用您的代码使其正常工作的一个小改变是在重新初始化之前使用.empty()。 .empty()将删除当前选择中的所有选项，然后在重新初始化时添加新项目。

function states_data(loc_data, selectedCountry) {
  var _states_array = [];
  var states = loc_data[selectedCountry];
  for (i = 0; i < states.length; i++) {
    _states_array.push({
      id: states[i],
      text: states[i]
    })
  }
  return _states_array
}

function _cities(state) {
  var val = Math.floor((Math.random() * 100) + 1);
  return [{
    id: val + state,
    text: val + state
  }];
}
var loc_data = {
  'USA': ['USA State 1', 'USA State 2', 'USA State 3'],
  'Australia': ['AUS State 1', 'AUS State 2']
}

$('#loc_state').select2({
  placeholder: "Select a state",
  disabled: true
}).on('change', function() {
  var selectedState = $(this).val();
  $('#loc_city').empty().select2({     // <-- empty first
    disabled: false,
    placeholder: "Select a city",
    allowClear: true,
    data: _cities(selectedState) //it should delete previous values and update new ones.
  });
}).trigger('change');

$('#loc_city').select2({
  placeholder: "Select a city",
  disabled: true
});

var countries_data = [];
for (var key in loc_data) {
  countries_data.push({
    id: key,
    text: key
  });
}

$('#loc_country').select2({
  placeholder: "Select a country",
  allowClear: true,
  data: countries_data
}).on('change', function() {
  var selectedCountry = $(this).val();
  $('#loc_state').empty().select2({        // <-- empty first
    disabled: false,
    placeholder: "Select a state",
    allowClear: true,
    data: states_data(loc_data, selectedCountry) //it should delete previous values and update new ones.
  });
}).trigger('change');

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>

<select id="loc_country"></select>
<select id="loc_state"></select>
<select id="loc_city"></select>

- BenG

---

非常好用...我之前是在单独的一行中使用 $("loc_state").empty();，但无法猜测它是否也可以用于绑定事件。谢谢！ - Jon L