從使用jQuery不工作的選擇組件中刪除選項

Question

我有一個表單，用戶可以在實驗中輸入多個數據實例。每次用戶輸入一個實例時，都會在動態表上創建一行。

它還向用戶需要用來填充表單中更多數據的兩個選定組件添加一個選項。因此，例如，用戶填寫實驗1和實驗2的信息，因此將創建一個表，其中兩行一個用於實驗1，另一個用於實驗2，並且選擇組件將具有兩個選項實驗1和實驗2。該表的每一行都有一個刪除行單元格，用戶可以單擊該行刪除該行。刪除行工作正常，但我無法從選擇組件中刪除選項。對於我在jQuery的做這

if($(obj).closest('table').attr('id')=='experiment-table'){ 
    var exp = tr.find('td:first').text(); 

    var txt = 'Experiment ' + exp; 

    $('#exp-select option[value="'+exp+'"]').remove(); 
    $('#expind-select optgroup[text="'+txt+'"]').remove(); 
} 

所以這段代碼做什麼，按說，是尋找最接近的表標籤obj的ID，OBJ在這種情況下是錶行（tr），其中用戶點擊刪除按鈕。
然後它找到tr的第一個單元格並提取文本，因爲那是它從選擇選項中刪除的實驗的編號。因此，如果用戶想要刪除實驗1，那麼實驗2的var exp將等於1或2.
然後，根據用戶選擇刪除的實驗，var txt將具有文本「實驗1」或「實驗2」 。

我調試了這部分，一切工作正常，我也檢查了選定的組件，他們有實驗1和實驗2的選項，他們應該有。

然後，我嘗試使用該代碼的最後兩行從選定組件中刪除選項。我嘗試使用第一個組件的選項的值，在實驗1的情況下，對於實驗2只是1或2，對於第二個組件的選項的文本，對於實驗1恰好是實驗1。

事情是，這兩個最後一行不工作。根據調試器#exp-select option[value="'+exp+'"]的長度爲0，儘管我可以看到組件上的選項，一個選項是實驗1的值爲1，另一個是實驗2的值爲2.我也嘗試使用文本而不是值但它不起作用，它也顯示長度爲0.

任何想法？

編輯：添加下拉代碼

  <div class="row"> 
      <div class="col-sm-6"> 
       <div class="form-group"> 
        <label for="exp_select">Experiment:</label> 
        <select class="form-control select-fill" id="exp_select" title=""> 
         <option></option> 
        </select> 
       </div> 
      </div> 
      </div> 

這是我每次

var rowCount = $('#experiment-table tr').length; 
$('#exp_select').append($('<option>', { 
    value: rowCount, 
    text: 'Experiment '+ rowCount 
})); 

Answer 1

您可以使用[attr*=""]屬性增加一個選項包含選擇：

$('#exp-select option[value*="'+exp+'"]').remove(); 
$('#expind-select optgroup[text*="'+txt+'"]').remove(); 

---

o R您也可以使用.filter()方法：

$('#exp-select option').filter(function(){ 
    return $(this).attr("value").indexOf(exp) != -1; 
}).remove(); 
$('#expind-select optgroup').filter(function(){ 
    return $(this).attr("text").indexOf(txt) != -1; 
}).remove(); 

Answer 2

使用.remove()爲option[value*=+VAL+]

從選擇列表中找到其中包含您所選擇的值選項，然後從DOM

刪除

$('#exp-select option[value*="'+exp+'"]').remove();