使用 appendChild 选择新时删除以前的 <select><option>答案

【问题标题】：Remove previous <select><option> when select new with appendChild使用 appendChild 选择新时删除以前的 <select><option>
【发布时间】：2014-05-26 22:21:07
【问题描述】：

当点击<li> 时，我正在从数据库获取信息到 json。

“55,63”是来自json的数据。

代码：

$('li.channel').click(function(){
    setTimeout(function(){
        var numbers = "55,63";
        var number = numbers.split(',');
        var select = document.getElementById('selectElement');
        for (f = 1; f < (countdata); f++){
            q = description(f);
            var opt = document.createElement('option');
            opt.value = number[f];
            opt.innerHTML = q;
            select.appendChild(opt);
        }
    }, 5000);
});
<select id="selectElement"></select>

结果：

<select id="selectElementId">
 <option value="55">effects - Russian</option>
 <option value="63">effects - English</option>
</select>

接下来，当我点击另一个 <li> 时，我正在将新数据写入 json。

我想删除所有以前的 <option> 元素并使用新的“数字”获取新的 <option>。但是当我点击另一个<li> 时，我的<select> 元素正在更新：

<select id="selectElementId">
 <option value="55">effects - Russian</option>
 <option value="63">effects - English</option>
 <option value="203">clean - Latvian</option>
 <option value="207">clean - English</option>
</select>

如何使用 jQuery / javascript 删除以前的数据？

【问题讨论】：

数字在javascript中是一个变量类型，不要这样当变量名。
好的，这只是示例！我的变量名称不同。

标签： jquery appendchild createelement

【解决方案1】：

使用empty() 你可以这样做：

$('li.channel').click(function(){
    setTimeout(function(){
        var numbers = "55,63";
        var number = numbers.split(',');
        var select = document.getElementById('selectElement');
        $(select).empty(); //empty the select
        for (f = 1; f < (countdata); f++){
            q = description(f);
            var opt = document.createElement('option');
            opt.value = number[f];
            opt.innerHTML = q;
            select.appendChild(opt);
        }
    }, 5000);
});

DOCUMENTATION

【讨论】：