jQuery集合在每个循环内部被破坏(移除elem,恢复innerHTML)应该怎么解决?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (30)

期望以下代码遍历选择选项并移除具有特定值的选项,否则还原选择html

var initialHTML = $('#myselect').html();

$('#myselect option').each(function(){
    if($(this).val() === 'b'){
        $(this).remove();
        console.log('matching. removed.');
        return false;
    }else{
        $('#myselect').html(initialHTML);
        console.log('not matching. html restored.');
    }
});

预期的选择将是:

<select id="myselect">
    <option value="a">a</option>
    <option value="c">c</option>
</select>

但实际上是

<select id="myselect">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
</select>
提问于
用户回答回答于

因为你在第一次迭代期间刷新了选项列表,$(this).remove()因为失去了与原始项目的联系而不再有效。因此,这里一个简单的解决方法是根据它的值重新选择目标。你可以在循环中保留你的原始代码$('#myselect').html(initialHTML);

var initialHTML = $('#myselect').html();
$('#myselect option').each(function(){
    if($(this).val() === 'b'){
        $("option[value='" + $(this).val() + "']").remove();
        console.log('matching. removed.');
        return false;
    } else { 
        $('#myselect').html(initialHTML);
        console.log('not matching. html restored.');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myselect">
    <option value='a'>a</option>
    <option value='b'>b</option>
    <option value='c'>c</option>
</select>
用户回答回答于

尝试这样做

$('#myselect').on('change',function(){

    if($(this).val() === 'b'){
        $(this).find('option:selected').remove();
        console.log('matching. removed.');
        return false;
    }
});

扫码关注云+社区

领取腾讯云代金券