Jquery - Filter list box based on the combobox

Jquery - Filter list box based on the combobox

I have two lists one displays cars company and the second one displays all the cars

Here is the first comboxbox ( The first option is ALL)

       ALL      GM      Honda      Ford    

here is my second lisbox

      Chevy [GM]      Buick [GM]      Civic [Honda]      Accord [Honda]      Focus [Ford]    

Based on the first combox selection , I should display only that car company cars in the second list . Even the second list has the car company name in brackets .. This is fixed format . Again from the the first list if user selects "ALL" I should show all the vehicles .

Could any body give me an idea to implement this or code snippet for this ?

Thanks for your help

Regards

Kiran

Answer by Dmitry for Jquery - Filter list box based on the combobox

You can each() on the second select's options in change() of the first select, search for substring and set the disabled attribute. (But this solution has a flaw: not every browser supports disabled attribute for option, AFAIK.)

UPDATE

And if you want to hide options completely, you should consider storing items from your second select in some temp storage and re-populate that select from the storage only with items that match your criteria.

UPDATE2

    var temp = new Array();        $(document).ready(function(){        //save in temp      $('select#names').children().each(function(){temp.push($(this).val());});        //change handler      $('select#company').change(function(){          var pref = $(this).val();          $('select#names').children().remove();            for(i=0;i'+temp[i]+'');          }            });      });  

Answer by Chandu for Jquery - Filter list box based on the combobox

EDIT: Works in FF only

Try this:

$(function(){   $("#company").change(function(){      var val = $(this).val();      $("#names option").hide().filter(function(){          var regExp = new RegExp("\\[" + val + "\\]$");          return (val == "ALL") || regExp.test($(this).text());      }).show();   });  });  

Example: http://jsfiddle.net/Chandu/2Zppp/

Answer by mr_eclair for Jquery - Filter list box based on the combobox

http://css-tricks.com/dynamic-dropdowns/

This is you wanted try to do with first option using text files or alternative option is JSON.

Answer by justkt for Jquery - Filter list box based on the combobox

As far as I know, hiding of select options only works on Firefox, so for cross browser compatibility you need to use a bit more trickery (see this SO question and this question among others). This is what I suggest:

For HTML, have a hidden copy of your select as well as the version you currently provide:

      ALL      GM      Honda      Ford    
  
                Chevy [GM]          Buick [GM]          Civic [Honda]          Accord [Honda]          Focus [Ford]        
        Chevy [GM]      Buick [GM]      Civic [Honda]      Accord [Honda]      Focus [Ford]    

Hide basenames with CSS display:none.

Then for your jQuery, you'll be replacing names regularly with a cloned version of baseNames and filtering it.

$(document).ready(function() {      $("#company").change(function() {          $("#namesDiv").empty();          $("#baseNames").clone().appendTo("#namesDiv").attr("id", "names");          var val = $(this).find("option:selected").val();          if(val !== "ALL") {              $("#names option").each(function() {                  if($(this).val().indexOf(val) < 0) {                      $(this).remove();                  }              });          }      });  });  

You can see this in action.

Answer by drudge for Jquery - Filter list box based on the combobox

Edit: Tested and working with IE7 and Firefox 3.6.x

Live Demo

HTML: note the value="" on the ALL option

      ALL      GM      Honda      Ford            Chevy [GM]      Buick [GM]      Civic [Honda]      Accord [Honda]      Focus [Ford]    

jQuery:

$('#company').change(function() {      var make = $(this).val();      $('#names').contents().each(function() {          if (this.nodeType == 8 && this.nodeValue.length > 0 && this.nodeValue.indexOf(make) != -1) {              $(this).before('' + this.nodeValue + '');              $(this).remove();          }          else if ($(this).val().indexOf(make) == -1 && $(this).val().length > 0) {              $(this).replaceWith('');          }      });  });  

Answer by Vincent Ramdhanie for Jquery - Filter list box based on the combobox

Another option is to assign a classname to the options like this:

        Chevy [GM]      Buick [GM]      Civic [Honda]      Accord [Honda]      Focus [Ford]      

Then based on the class you can show() and hide() like this:

 $(document).ready(function(){     $("#names>option").hide();     $("#company").change(function(){       $("#names>option").hide();       $("#names>." + $(this).val()).show();       if($(this).val() == "ALL"){            $("#names>option").show();       }     });  });  

Answer by Alnitak for Jquery - Filter list box based on the combobox

Not all browsers allow you to hide the individual items in a drop-down list, so you need to keep a master list, and then repopulate based on that.

var names = $('#names option').clone();    $('#company').change(function() {      var val = $(this).val();        $('#names').empty();      names.filter(function(idx, el) {          return val === 'ALL' || $(el).text().indexOf('[' + val + ']') >= 0;      }).appendTo('#names');  });  

Working demo at http://jsfiddle.net/alnitak/WsHvS/

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72