如何使用jquery删除和替换选择选项?

这里需要一些帮助。 我有一个动态表单,使用户可以选择他/她正确的地址。 我做的是我有2个选择框。 一个是国家,第二个是城市。 在用户选择他/她的状态之后,下拉城市选项将根据所选状态动态地改变。 我的问题是,我正在追加它。 这就是我改变正确城市的问题。 因为它将显示先前选择的选项值。 它不断追加和追加。 知道我该如何解决这个问题? 这是我的代码。

$('#state').on('change',function(){ var state_code = $('#state').val(); var city_url = ''; $.ajax({ type: 'POST', url: city_url, data: '', dataType: 'json', async: false, success: function(i){ var select = $('#city'); for (var j = 0; j < i.length; j++){ console.log(i[j].name + "--" + i[j].id); $("#city").append("" +i[j].name+ ""); } } }); }); 

这是城市的选择:

  ---Select City---  

删除所有选项并再次附加默认选项:

 var select = $('#city'); select.empty().append(''); 

http://api.jquery.com/empty/

您可以执行以下操作:

 var selectbox = $('#city'); selectbox.empty(); var list = ''; for (var j = 0; j < i.length; j++){ list += ""; } selectbox.html(list); 

注意:不要在循环中调用append方法,也要缓存选择器。

您应该在添加之前清除城市div,如下所示:

 success: function(i){ var select = $('#city'); select.empty(); select.append(""); for (var j = 0; j < i.length; j++){ console.log(i[j].name + "--" + i[j].id); $("#city").append(""); } } 

在for循环之前,添加此代码。

 $("#city option").each(function() { $(this).remove(); }); 

工作小提琴

试试吧,

  success: function(i){ var select = $('#city'); // remove previous data and add default option select.html(''); for (var j = 0; j < i.length; j++){ console.log(i[j].name + "--" + i[j].id); select.append(""); } } 

仅仅因为我遇到了这种情况 – 我想我会提到如果你使用bootstrap-select来美化你的选择框(或者甚至是你传统的html选择的另一个类似的javascript视觉替换)你可能需要刷新它一旦你’我们重新选择了这些选项。 在select-bootstrap的情况下,它是$(element).selectpicker('refresh') – 例如:

 function changeSelectOptions( id, max ) { var selectbox = $(id); selectbox.empty(); var list = ''; for (var j = 1; j < max; j++){ list += ""; } selectbox.html(list); $(id).selectpicker('refresh'); }