选择二选项不会得到更新正确

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>