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

时间：2017-05-23 17:37:00

标签： javascript jquery html select

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

这里是小提琴，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>

5 个答案:

答案 0 :(得分：2)

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

你有两个问题：

1）您指的是错误的下拉列表（var select = document.getElementById("chooseRoomNo");）

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

这是你的例子：

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>

答案 1 :(得分：1)

在您的函数var select = document.getElementById("chooseRoomType");中使用showRooms()而不是var select = document.getElementById("chooseRoomNo");。因为您获得了第二个下拉列表的值，默认情况下总是为1。

答案 2 :(得分：1)

您似乎选择了错误的DropDown：

function showRooms() { //chooses single room every time
  var select = document.getElementById("chooseRoomNo");// This should be "chooseRoomType"
  var selectedValue = select.options[select.selectedIndex].value;
  if (selectedValue == 1) {

答案 3 :(得分：0)

基本上你在调用roomnumber选择器而不是roomtype。

答案 4 :(得分：0)

除了指出你的拼写错误的所有其他答案之外，我在这里是如何做到的： 使用一些明确定义的房间逻辑和show/hide

所有你需要的：

var roomLogic = {
  0 : [1,2,3,4,5,6,7],
  1 : [1,3,5],
  2 : [2,4,6],
  3 : [7]
};

$("#chooseRoomType").on("change", function() {

  var type = this.value;  

  $("#chooseRoomNo").find("option").hide().filter(function() {
    return  $.inArray( +this.value, roomLogic[type] ) > -1; 
  }).show().eq(0).prop("selected", true);

});

这是一个完整的演示：

＆＃13;
＆＃13; 
var roomLogic = {
	0 : [1,2,3,4,5,6,7],
  1 : [1,3,5],
  2 : [2,4,6],
  3 : [7]
}

$("#chooseRoomType").on("change", function() {

  var type = this.value;  
  
  $("#chooseRoomNo").find("option").hide().filter(function() {
  	return  $.inArray( +this.value, roomLogic[type] ) > -1; 
  }).show().eq(0).prop("selected", true);
  
  // if (type==0) alert("You need to select a room");

});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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">
      <!--  onchange="showValidRooms" ??? -->
        <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>
＆＃13;
＆＃13;
＆＃13;

有一天，如果您的房间逻辑发生变化，那么您需要不小心编辑的是var roomLogic。没别了。

相关问题
最新问题