Select2 选项未正确更新

Question

我正在尝试在我的网站中构建Country -> State -> City 功能，其中state 和city 选择框是disabled，一旦用户选择Country，它就会显示该国家/地区各自的州等等。

我面临的问题是，一旦特定国家/地区的状态显示在状态输入中，之后如果我更改国家/地区，那么新国家/地区的状态也会显示，但与以前国家/地区的状态一起显示。

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');

如果您选择USA，则会显示美国的州，但如果您将其更改为Australia，则会显示Australia's，但USA's 也在那里，它们根本不会被删除。

可能是什么问题？

如果用户取消选择Country 字段，我如何从State 和City 中删除所有选择？

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>