刪除以前<select><option>時選擇新的與使用appendChild

Question

當點擊<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>元素並用新的'Numbers'獲取新的<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的刪除以前的數據？

Answer 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