JQuery-克隆一个select元素，过滤所需的选项元素并附加到另一个select

Question

我正在处理一个应用程序的网页，该网页上有两个select元素(以及其他元素(。最初，两个选择元素都将具有值。特别要注意的是，第二个select元素将具有完整的值集。要求第二选择的内容基于用户在第一选择元素中选择了什么而减少到子集。由于我需要保留第二次选择的初始内容，我首先在document.ready((.中克隆它

假设下面是初始的第二选择元素

<select id="sid">
<option value="0" selected="">Unknown</option>
<option value="1">Unit</option>
<option value="2">House</option>
<option value="3">Apartment</option>
</select>

我如何创建一个克隆，并从对象中删除"未知"one_answers"公寓"，并将其附加回select，先运行empty((清除选项。

到目前为止，我带来了以下内容。寻找传递给过滤器的函数中可能包含的信息(请参见注释//需要逻辑来过滤值为Unknown和Apartment的选项(

var toRetain = $('#sid').clone();
$('#sid').empty();
var secondClone = toRetain .clone()
$('option', secondClone).each(function(i){console.log(i));}); // able to print all options
$('option', secondClone).filter(function(i){
//need logic to filter option with value Unknown and Apartment
}).remove()
$('#sid').append(b.html())

Answer 1

假设要删除的选项始终位于相同的位置，则可以使用:eq()来选择和删除它们，而无需empty()整个集合：

var $toRetain = $('#sid').clone().removeAttr('id').appendTo('body');
$toRetain.find('option:eq(0), option:eq(3)').remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sid">
<option value="0" selected="">Unknown</option>
<option value="1">Unit</option>
<option value="2">House</option>
<option value="3">Apartment</option>
</select>

或者，你可以使用:first和:last，甚至在它们上面添加一个特定的class来选择。在任何情况下，模式都是相同的；识别要移除的CCD_ 6，并在其上调用CCD_。

如果你需要根据它们的文本内容来选择它们，那么你可以使用filter():

let toRemove = ['Unknown', 'Apartment'];
var $toRetain = $('#sid').clone().removeAttr('id').appendTo('body');
$toRetain.find('option').filter((i, el) => toRemove.indexOf(el.textContent.trim()) != -1).remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sid">
<option value="0" selected="">Unknown</option>
<option value="1">Unit</option>
<option value="2">House</option>
<option value="3">Apartment</option>
</select>

还要注意，我使用removeAttr()从克隆的内容中删除id，因为id属性在DOM中必须始终是唯一的。

Answer 2

以下代码也实现了所需的

var toRetain = $('#sid').clone();
$('#sid').empty();
var secondClone = toRetain .clone()
$('option', secondClone).each(function(i){console.log(i));}); // able to print all options
$('option', secondClone).filter(function(i){
return  ['Unknown', 'Apartment'].indexOf($(this).html()) != -1;
}).remove()
$('#sid').append(b.html())