如何根据动态值删除多个选择选项

问题描述：

我有2个选择框，第二个显示基于第一个框中的类别的所有选项的子集。第二个框包含ID和名称，其中选项值等于ID。我已经过滤了我感兴趣的ID并将它们放在一个数组中。每次都会更改，并且可能会有不同的大小（按组筛选所有用户）。我想要做的是对完整选项进行克隆，然后仅显示那些身份证（或值）存在的人。因此，将过滤值的数组与完整集进行比较。我确实看到了一些删除选项的方法，但是大多数方法一次只能处理一个值或固定值，所以它并不完全符合我的需要，而且我也无法弄清楚如何执行最后一步！如下所示：如何根据动态值删除多个选择选项

<select id = 'doctor_select' > 
<option value = '1' > John Doe </option> 
<option value = '2' > Jane Doe </option>

....等

编辑：通过隐藏所有，并做了每个循环，使我需要的人解决了现在。

您是否试图将ID映射到选项？你只需要与id相匹配的选项？你会怎么看，与ID有关的期权价值？ – 2016-10-03 23:23:57

这些值已经是用户ID，并显示其名称。过滤的用户数组包含所有正在搜索的组中的所有id，因此我只想在总列表中显示这些选项。 – nick

数组在哪里？目标还不是很清楚 – charlietfl

答

我不会这样做，但你可以克隆原来的组合，只需从DOM中删除不必要的选项。就像：

var newDoctorSelect=$("#doctor_select").clone(); 
$(newDoctorSelect).children("option").each(function() { 
    if(some condition) $(this).remove(); 
}); 
$("#somewhere").append(newDoctorSelect);

但我建议要么使用AJAX或将选项存储在一个对象中，并在需要时填充选择。

var optionsByCategory={ 
    "1":{"1":"One","3":"Three"}, 
    "2":{"2":"Two"} 
}; 

$("#categorySelect").on("change",function() { 
    var options=optionsByCategory[$(this).val()]; 
    //OR some AJAX call to retreive the options from the server instead 
    $("#doctor_select option").remove(); 
    for(var k in options) $("#doctor_select").append($("<option>").val(k).text(options[k])); 
});

答

你可以这样做：

var options = getElementsByTagName("option"), 
    elem, 
    length = options.length; 

for (var i = 0; i<length; i++) { 
    if (!((elem = options[i]).value === IDYouWantToMatch)); elem.parentNode.removeChild(elem); 
}

答

我想你想要像下面这样使用filter()

var $sel = $('#doctor_select'), 
    $opts = $sel.children(); 

var $filteredOpts = $opts.clone().filter(function(){ 
    return someArray.indexOf(this.value)>-1; 
}) 
$sel.empty().append($filteredOpts);

存储的$opts现在可以重新用于未来的变化

如何根据动态值删除多个选择选项

相关推荐