使用jQuery从选择组件中删除选项不起作用

Question

我有一个表单，用户可以在其中输入多个实验数据实例。每次用户进入实例时，都会在动态表上创建一行。

它还为两个选择组件添加了一个选项，用户需要使用这些组件从表单中填写更多数据。例如，用户填写实验 1 和实验 2 的信息，因此将创建一个包含两行的表，其中一行用于实验 1，另一行用于实验 2，并且选择的组件将有两个选项 Experiment 1 和 Experiment 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 的第一个单元格并提取文本，因为这是它必须从选择选项中删除的 Experiment 编号。因此，如果用户想要删除实验 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();

---

或者你也可以使用.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();