从使用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();