Question

I have 2 dropdowns and i want the second dropdown to hide/show certain elements (having a class) when $('#first_dropdown').change() occurs

I tried the same , but with little success, how can i achieve the same , im looking to hide a chunk of <option> in my second dropdown how can i do this ?

My tried code :

var a = $('#first_dd').val(); //first dropdown - dd value
$('#first_dd').change(function(){
$('.a').hide();        //iv given a class to all elements of second dropdown
});

Answer 1

You can’t hide options from a select box in all browsers. You need to store your options in an array and actually remove them from the select element. Probably easier to rebuild the second select element when the first select element changes, leaving out the options you don’t want.

Using Kakarott’s fiddle as a base, I’d do it like this:

DEMO

This should work on all browsers.

UPDATED the fiddle to show no options if you didn’t select anything in select1 yet.

Final code:

HTML

<select name="select1" id="category">
    <option value="0">None</option>
    <option value="1">First</option>
    <option value="2">Second</option>
</select>

<select name="items" id="select2">
    <option value="0" class="1">Item 1</option>
    <option value="1" class="1">Item 2</option>
    <option value="2" class="2">Item 3</option>
    <option value="3" class="2">Item 4</option>
</select>

JS

/* Taking an array of all options-2 and save it on select1 */
$("#category").data('options',$('#select2 option').clone());
$("#select2").html("");

$("#category").change(function() { 
    var itemClass = $(this).val();
    var options = $(this).data('options').filter('.' + itemClass);
    $('#select2').html(options);
});

​
Update: Extra clarification

This line:

$("#category").data('options',$('#select2 option').clone()); 

Selects the first select box, and using the .data method it attaches some data to that select box. Which data? All the options that select box 2 contains. How? By selecting all options select box 2 contains, and cloning them (copying them).

It saves that set of options because that way we can use this collection again and again, filtering it using the selected value from select box 1 and setting the remaining options as the content of select box 2, replacing whatever options were there before. That happens in this line:

var options = $(this).data('options').filter('.' + itemClass);

So we don’t have to hide any options, we just replace them every time with the filtered set of all available options.