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也会出现，它们根本没有被删除。

可能是什么问题？

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

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>

Select2选项无法正确更新

1 个答案: