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:

HH1:
    <select name="drop1">
      <option value="0">
      <option value="2">
      <option value="3">
      ......
      <option value="23">
    </select>

HH2:
    <select name="drop1">
      <option value="0">
      <option value="2">
      <option value="3">
      ......
      <option value="23">
    </select>

Edit: Sorry I forgot to mention the option items are being populated via javascript (for loop). I just need to know how to make HH2 dynamic based on HH1 selected value.

If the user selects 3 in option HH1(Hour) I would like to show only 3-0 (where 0 is 24 hour) select options in HH2. I don't want to see 1-2.

Basically, HH2 is dependent on selected value in HH1 — is this possible in JavaScript? Could you please show me how, if possible?

Answer 1

var drop2 = $("select[name=drop2] option"); // the collection of initial options
$("select[name=drop1]").change(function(){
    var drop1selected = parseInt(this.value); //get drop1 's selected value
    $("select[name=drop2]")
                     .html(drop2) //reset dropdown list
                     .find('option').filter(function(){
                        return parseInt(this.value) < drop1selected; //get all option with value < drop1's selected value
                      }).remove();  // remove
});

http://jsfiddle.net/HTEkw/