Jquery 依赖下拉框填充 - 如何

Question

我有依赖的下拉框，如下面的场景所示。谁能建议如何使用 JQuery/Javascript 实现结果？

场景:

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>

编辑:抱歉，我忘记提及选项项是通过 javascript(for 循环)填充的。我只需要知道如何根据 HH1 选择的值使 HH2 动态。

如果用户在选项 HH1(小时)中选择 3，我想在 HH2 中仅显示 3-0(其中 0 是 24 小时)选择选项。我不想看到 1-2。

基本上，HH2 取决于 HH1 中选定的值 - 这在 JavaScript 中可能吗？如果可能的话，您能告诉我怎么做吗？

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/