javascript - 根据另一个选择的结果更改 HTML <select> 中的选项

Question

不确定我在这里做错了什么，我将我的代码放在一个 jsfiddle 中，这样它可能更容易阅读和调试。无论我从列表中选择什么选项，它都认为这是我选择的“单人房”值。如果房间是单人房，应该显示最多 5 的奇数，如果选择双人房(和 < 7)，则应该显示偶数，对于家庭房，显示的数字应该仅为 7。

这是 fiddle ，https://jsfiddle.net/35rchfup/

感谢任何能提前提供帮助的人。

<div class="form-group">
 <label class="col-md-4 control-label" for="chooseRoomType">Choose room 
type:</label>
<div class="col-md-4">
<label class="select" for="chooseRoomType">
  <div class="select">
    <select class="form-control" runat="server" id="chooseRoomType" onchange="showValidRooms">
      <option value="0">Choose room</option>
      <option value="1">Single room</option>
      <option value="2">Double room</option>
      <option value="3">Family room</option>
    </select>
  </div>
</label>
</div>
</div>

<div class="form-group">
<label class="col-md-4 control-label" for="chooseRoomNo">Choose room number:
</label>
 <div class="col-md-4">
   <label class="select" for="chooseRoomNo">
     <div class="select">
      <select class="form-control" runat="server" id="chooseRoomNo">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
    </select>
  </div>
</label>
 </div>

<script>
   document.getElementById("chooseRoomType").onchange = function() {
 showRooms()
};

function showRooms() { //chooses single room every time
  var select = document.getElementById("chooseRoomNo");
  var selectedValue = select.options[select.selectedIndex].value;
  if (selectedValue == 1) {
$('#chooseRoomNo')
  .empty()
  .append('<option value="1">1</option>', '<option value="3">3</option>', 
'<option value="5">5</option>');
 } else if (selectedValue == 2) {
   $('#chooseRoomNo')
     .empty()
     .append('<option value="2">2</option>', '<option value="4">4</option>', 
  '<option value="6">6</option>');
   } else if (selectedValue == 3) {
    //show family room (number 7)
    $('#chooseRoomNo')
     .empty()
     .append('<option value="7">7</option>');
 } else if (selectedValue == 0) {
    alert("You must choose a room type.");
}

 console.log(selectedValue);//always 1
 }
</script>

Answer 1

更改了您的示例:https://jsfiddle.net/35rchfup/2/

你有两个问题:

1) 您指的是错误的下拉菜单 ( var select = document.getElementById("chooseRoomNo"); )

2) 你没有调用函数 onchange ( <select class="form-control" runat="server" id="chooseRoomType" onchange="showValidRooms"> )，因为你通过 JavaScript 绑定(bind)了你的事件

这里是你的例子:

document.getElementById("chooseRoomType").onchange = function() {
  showRooms()
};

function showRooms() { //chooses single room every time
  var selectedValue = $("#chooseRoomType").val();
  if (selectedValue == 1) {
    $('#chooseRoomNo')
      .empty()
      .append('<option value="1">1</option>', '<option value="3">3</option>', '<option value="5">5</option>');
  } else if (selectedValue == 2) {
    $('#chooseRoomNo')
      .empty()
      .append('<option value="2">2</option>', '<option value="4">4</option>', '<option value="6">6</option>');
  } else if (selectedValue == 3) {
    //show family room (number 7)
    $('#chooseRoomNo')
      .empty()
      .append('<option value="7">7</option>');
  } else if (selectedValue == 0) {
    alert("You must choose a room type.");
  }

  console.log(selectedValue);//always 1
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<div class="form-group">
  <label class="col-md-4 control-label" for="chooseRoomType">Choose room type:</label>
  <div class="col-md-4">
    <label class="select" for="chooseRoomType">
      <div class="select">
        <select class="form-control" runat="server" id="chooseRoomType">
          <option value="0">Choose room</option>
          <option value="1">Single room</option>
          <option value="2">Double room</option>
          <option value="3">Family room</option>
        </select>
      </div>
    </label>
  </div>
</div>

<div class="form-group">
  <label class="col-md-4 control-label" for="chooseRoomNo">Choose room number:</label>
  <div class="col-md-4">
    <label class="select" for="chooseRoomNo">
      <div class="select">
        <select class="form-control" runat="server" id="chooseRoomNo">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
        </select>
      </div>
    </label>
  </div>
</div>