Question

我有许多基于各种用户输入生成的动态<select>元素。我正在尝试删除某些不适用于每个选择的<option>，但jQuery似乎删除了更多<option>，然后它应该根据我的代码删除。一个完整的用例很难重现，所以我会发布我所看到的内容，并希望能够很好地解决这个问题。

为了向自己证明我并不疯狂，我决定添加一个类而不是删除循环中的<option>。这是我使用的：

$('.my-select').each(function(sourceIdx,sourceEl){
 var id = $(sourceEl).attr('id');
 var s = $('#'+id).parents('table').find('.some-input').val();
 $(sourceEl).find('option[value="'+s+'"]').addClass('option-remove');
});

以下是生成的来源：

<select class="my-select" id="1295453461993">
 <option title="1" value="1">1</option>
 <option title="2" value="2" class="option-remove">2</option>
 <option title="3" value="3">3</option>
</select> 

<select class="my-select" id="1295453475890">
 <option title="1" value="1">1</option>
 <option title="2" value="2">2</option>
 <option title="3" value="3" class="option-remove">3</option>
</select>

这正是我想要发生的事情。但是，当我在循环之后立即添加它时：

$('.option-remove').remove();

我明白了：

<select class="my-select" id="1295454051124">
 <option title="1" value="1">1</option>
</select>

<select class="my-select" id="1295454058398">
 <option title="1" value="1">1</option>
 <option title="2" value="2">2</option>
</select>

这让我说：“等等，什么？！”。出现当jQuery删除第二个选择中的<option>时，它会从第一个<option>中删除相同的<select>（值= 3）。不酷。

那么我在这里可能做错了什么？

我正在使用jQuery 1.4.4在FireFox 3.5中测试（在IE中的结果相同）。

Answer 1

精简的非动态测试用例可以正常工作：

<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>

<body>

<form>
<select class="my-select" id="1295453461993">
  <option title="1" value="1">1</option>
  <option title="2" value="2" class="option-remove">2</option>
  <option title="3" value="3">3</option>
</select> 

<select class="my-select" id="1295453475890">
  <option title="1" value="1">1</option>
  <option title="2" value="2">2</option>
  <option title="3" value="3" class="option-remove">3</option>
</select>
</form>

<script>
  $('.option-remove').remove();
</script>

</body>
</html>

必须有其他事情发生......

Answer 2

虽然我不知道你的问题的解决方案，但我可能会有所帮助。也许这会让你的生活更轻松 - ＆gt; https://github.com/SamWM/jQuery-Plugins/tree/master/selectboxes

我用它并且效果很好。它不是一个很大的插件，所以没有太大的开销。

Answer 3

$（sourceEl）.find（ '选项[值= “ '+ S +”']'）addClass（ '选项 - 删除'）;

只是好奇，如果你使用它会怎么样？

$('#' + id).find('option ...

即。由id，而不是传递给函数的元素

或

$('#' + id + '> option[value="'+s+'"}')

即。一个大选择器，而不是'找'

通过复制html（）
动态创建第二个选择

你复制时给它一个唯一的ID吗？

jQuery删除<option>标签，它不应该删除</option>

3 个答案: