Question

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

它还为两个选择组件添加了一个选项，用户需要使用该选项来填充表单中的更多数据。因此，例如，用户填写实验1和实验2中的信息，因此将创建一个表，其中两行用于实验1，一个用于实验2，选择组件将具有两个选项实验1和实验2.

该表的每一行都有一个删除行单元格，用户可以单击该行以删除该行。删除行工作正常但我在从select组件中删除选项时遇到问题。为此，我在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将有文本＆＃34;实验1＆＃34;或＆＃34;实验2＆＃34;取决于用户选择删除的实验。

我调试了这个部分，一切都运行正常，我还检查了选择组件，他们有实验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();

使用jQuery删除select组件中的选项

2 个答案: