所有选定元素的ID。这将使JavaScript更容易识别它们。ID必须是唯一的。我将遵循在元素的name之后命名id的惯例

第三，我们要做的是监听select元素上的JavaScript事件

onchange

，然后对其进行处理（注意

id

属性）

现在，我们将定义使用Blacksburg信息更新第二个选择列表的函数：

var doBlacksburg = function() {
  var blacksburg = document.getElementById('room');

  blacksburg.options[0] = new Option("Kitchen Side", "Kitchen", true, false);
  blacksburg.options[1] = new Option("Closet Side", "Closet", false, false);
  blacksburg.options[2] = new Option("Full Room", "Full", false, false);
}

这将使用Blacksburg选项更新第二个选择列表

---

这段代码绝不是广泛的，但它应该足以让您开始。正如我前面所说的，上面的所有代码都可以在短短5行jQuery中完成，您可能值得花时间研究jQuery或类似的库。

第一个列表和第二个列表的关联值是静态的吗？第一个列表和第二个列表的关联值是静态的吗？

<select name="room">
  <option value="Kitchen">Kitchen Side</option>
  <option value="Closet">Closet Side</option>
  <option value="Full">Full Room</option>
</select

<select name="room">
  <option value="Window">Window Side</option>
  <option value="Door">Door Side</option>
  <option value="Full">Full Room</option>

var roomOpts = {
  b: [
    '<option value="Kitchen">Kitchen Side</option>', 
    '<option value="Closet">Closet Side</option>',
    '<option value="Full">Full Room</option>'
  ]
  ....
};

$('select[name=branch]').change(function () {
  $('select[name=room']).html(roomOpts[$(this).val()].join(''));
});

var optionsMap = {
    b: {
      Kitchen: "Kitchen Side",
      Closet: "Closet Side",
      Full: "Full Room"
    },
    c: {
      Window: "Window Side",
      Door: "Door Side",
      Full: "Full Room"
    },
    ...
};

jQuery("#firstSelect").change(function() {

    /* "this" is a reference to firstSelect element. Wrapping jQuery(...)
        around it turns it into a jQuery object. Then you get the value
        of the selected element with .val() */
    var $select = jQuery(this);
    var value = $select.val();

    /* I'm doing the following to illustrate a point; in some cases 
       you may have to get it from a database with an AJAX request. 
       Basically YMMV */
    var newOptions = optionsMap[value];

    /* remove all the old options */
    jQuery("#secondSelect").find("option").remove();

    /* Iterate over the hash that you got and create new option
       objects that use the key of the hash as the option value
       and the value of the hash as the option text */
    jQuery.each(newOptions, function(option, value) {
       jQuery("#secondSelect").append(
          jQuery("<option></option>").attr("value", option)
                                     .text(value)
       );
    });
});

<select id="branch" name="branch" onchange="handleChange();">
  <option value="b">Blacksburg</option>
  <option value="c">Christiansburg</option>
  <option value="f">Floyd</option>
  <option value="m">Meadowbrook</option>
</select>

<select id="room" name="room">
</select>

<script type="text/javascript">
  var handleChange = function() {

    // get a handle to the branch select element
    var branch = document.getElementById('branch');

    // get the index of the selected item
    var index = branch.selectedIndex;

    // handle displaying the correct second select element
    if (index === 0) {

      // if the index is 0 (the first option,) call the Blacksburg function
      doBlacksburg();

    // I'll leave this up to you ;)
    } else if (index === 1) {
      // more stuff
    }
  }
</script>

var doBlacksburg = function() {
  var blacksburg = document.getElementById('room');

  blacksburg.options[0] = new Option("Kitchen Side", "Kitchen", true, false);
  blacksburg.options[1] = new Option("Closet Side", "Closet", false, false);
  blacksburg.options[2] = new Option("Full Room", "Full", false, false);
}