Jquery dependent drop down boxes populate- how

Question

I\'ve got dependent drop down boxes as shown on scenario below. Could anyone please suggest how to achieve the result using JQuery/Javascript?

Scenario:

Answer 1

The short answer is Yes it is possible in JavaScript/Jquery.

You could do it like this defining your dependencies in a brand new HTML5 data-* attribute :-)

HTML like this:

HH1:

    00
  02
  03
  23


HH2:

  00
  02
  03
  23

And Javascript(JQuery) like this:

$('select[name="drop1"]').change(function () {
var ar = $('select[name="drop1"] option:selected').attr('data-shown').split(',');
$('select[name="drop2"] option').each(function(){
    $(this).toggle(false);
    for(var i = 0; i <= ar.length; i++){
        if($(this).attr('value') == ar[i]){
        $(this).toggle(true);
        }
    }
});}).trigger('change');

That should do what you want done on your drop downs.

With the condition you put in the comment it is a bit easier:

$('select[name="drop1"]').change(function () {
    var number = parseInt($('option:selected', this).attr('value'));
    $('select[name="drop2"] option').each(function(){
            $(this).toggle(parseInt($(this).attr('value')) >= number);
        });
}).trigger('change');