CODEWITHSUNDEEP
jquery
rkrara
rkrara

Reputation: 450

jquery remove/hide list option not containg string value from other list

I have a problem updating select options.

<select id="all">
    <option value="Volvo_A">Volvo_A</option>
    <option value="Volvo_B">Volvo_B</option>
    <option value="Volvo_C">Volvo_C</option>
    <option value="Saab_A">Saab_A</option>
    <option value="Saab_B">Saab_B</option>
    <option value="Saab_C">Saab_C</option>
    <option value="Saab">Saab</option>
    <option value="Mercedes_A">Mercedes_A</option>
    <option value="Mercedes_B">Mercedes_B</option>
    <option value="Mercedes_C">Mercedes_C</option>
    <option value="Mercedes">Mercedes</option>
    <option value="Audi_A">Audi_A</option>
    <option value="Audi_B">Audi_B</option>
    <option value="Audi_C">Audi_C</option>
</select>

<select id="type">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>
<button type="button" id="Filter">Filter</button>

I want to update select list with id all based on value from select list with id type using Jquery. For example if volvo is selected from select with id type, then all option which do not contain volvo in select list with id all should be hidden temporarily. How can I achieve this.

I tried the following code but did not work.

$( "#Filter" ).click(function( event ) {
  var filter = $("#type").val();
  $("#all > option[value != filter]").remove();
});

Upvotes: 0

Views: 1748

Answers (3)

Adam
Adam

Reputation: 6783

$(function(){
   $('#type').change(function(){
       var val_type = $(this).val().toLowerCase();
       $('option', '#all').each(function(){
           if( $(this).val().toLowerCase().indexOf(val_type) === -1 ){
               // Not right type
               $(this).prop('disabled', true).hide();
           } else {
               // Is right type
               $(this).prop('disabled', false).show();
           }
       });
       // If the selected option is not longer possible then choose the first possible option
       if( $('option', '#all').filter(':selected').is(':disabled') ){
           $('#all').val($('option', '#all').not(':disabled').first().val());
       }
   }).change(); 
});

Note: I have amde the comparision case-insenitive via toLowerCase() since otherwise nothing is selected. See it working here.

However, a better option performance-wise would be to add a class to each option in the #all select with which to match the allowed values.

Edit: just seen the filter button. Had read it initially as wanting it on a change event so that is the way I have done it. But not difficult to convert the code the run on the button click instead.

Edit: Here is a version using classes which will be more efficient if the lists get big.

Upvotes: 1

user3493928
user3493928

Reputation:

Heres a jsfiddle

of it working.

function Test(val){

    $("#all > option").each(function() {
        if(this.value.indexOf(val)== -1){
            $(this).remove();
        }
}); 
}

Upvotes: 1

JF it
JF it

Reputation: 2403

http://jsfiddle.net/H2eCw/

$( "#Filter" ).click(function( event ) {
  var filter = $("#type").val();
    console.log($("#all > option:not([value^=\"Volvo\"])"));
            console.log(filter);
    $("#all > option").show();
    $("#all > option:not([value^=\""+filter+"\"])").hide();
    $("#all").val($('#all>option:visible:first').val());
           //$("#all > option:not[value ^= "+filter+"]").remove();
});

Hide/Show instead of Remove..

Upvotes: 1

Related Questions