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

时间:2016-10-03 23:19:36

标签: javascript jquery

我有2个选择框,第二个框根据第一个框中的类别显示所有选项的子集。第二个框包含id和名称,其中选项值等于id。我已经过滤掉了我感兴趣的id并将它们放在一个数组中。这将每次更改,并且可以是不同的大小(按组过滤所有用户)。我想要做的是克隆完整的选项,然后只显示id(或value)存在的那些。因此,将过滤值数组与完整集进行比较。我确实看到了几种删除选项的方法,但大多数只能同时使用一个值或固定值,所以它并不完全符合我的需要,我无法弄清楚如何做到这一点最后一步!看起来如下:

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

....等

编辑:现在通过隐藏所有并为每个循环执行a来解决,以启用我需要的那些。

3 个答案:

答案 0 :(得分:1)

我不会这样做,但你可以克隆原始组合,只需从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]));
});

答案 1 :(得分:0)

你可以这样做:

Lorem ipsum dolor sit amet, co
nsectetur adipiscing elit. Ali
quam est arcu, congue vehicula
 consectetur in, tempus ac ex.
 Integer urna lectus, maximus
vel felis sed, dapibus gravida
 risus. Curabitur diam arcu, a
ccumsan at magna id, laoreet c
ondimentum ante.

Nulla id velit justo. Aenean leo risus, interdum lobortis enim sit amet, aliquet elementum dolor. Morbi pretium velit sed mauris molestie viverra. Cras ut cursus nibh. Aliquam ut aliquam nunc, eget rhoncus sapien.

Sed efficitur justo aliquam orci molestie, vel condimentum dui semper. Sed lobortis dignissim ligula ut bibendum. Pellentesque finibus euismod massa a congue.

Sed placerat quam eget ante ru

trum pretium a in orci. Quisqu

e id lorem dapibus, tincidunt

lorem et, convallis orci. Etia

m sed placerat ante.



     Donec mi est, sodales sed

      faucibus ac, elementum e

     u velit. Nam mollis variu

     s porttitor. Sed dignissi

     m sodales malesuada.

     Donec nec

     tempus tur

     pis, at co

     ndimentum

     velit.

答案 2 :(得分:0)

我认为您需要使用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重新用于将来的更改