CODEWITHSUNDEEP
javascriptjquery
nick
nick

Reputation: 891

How to remove multiple select options based on dynamic value

I have 2 select boxes, with the second showing a subset of all options based on the category in the first box. The second box contains ids and names, where the option value equals the id. I already filtered out the id's I am interested in and have them in an array. This will change each time and can be different sizes (filtering all users by groups). What I would like to do is take a clone of the complete options and then only show those whos id (or value) is present. So, compare the array of filtered values to the complete set. I did see a couple ways to remove options, but most were for only one value at a time or for fixed values, so it didn't exactly fit what I need and I can't figure out how to do this last step! Looks like the following:

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

.... etc

edit: solved for now by hiding all and doing a for each loop to enable the ones I need.

Upvotes: 0

Views: 715

Answers (3)

charlietfl
charlietfl

Reputation: 171669

I think you want something like the following using filter()

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

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

The stored $opts can now be re-used for future changes

Upvotes: 0

user6765872
user6765872

Reputation:

You could do this:

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);
}

Upvotes: 0

Gabriel
Gabriel

Reputation: 2190

I wouldn't do it like this, but you could clone the original combo and simply remove the unnecessary options from the DOM. Something like:

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

But I'd recommend either using AJAX or storing the options in an object and populating the select when needed.

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]));
});

Upvotes: 1

Related Questions