jQuery - onChange()在onChange()中不起作用

Question

TL;DR

当前输出：-Divs的隐藏/显示状态仅在单击复选框时更改

想要的输出：-Divs的隐藏/显示状态对复选框和下拉列表都很敏感。

这里是一个功能良好的小提琴。

详细信息：

我试图只显示一个页面的一部分，这取决于两个输入。使用第一个输入时，用户必须选择多个房间。对于第二个问题，用户必须决定他或她是否将整个财产出租出去。

如果用户选择超过一个房间，并决定出租整个物业，我想显示的房间数目。不过，如果他或她有多间房，而不是出租整个物业，或他或她只有一间房间或一间单间，而且是出租全部物业，我只想显示一间房间，以输入详细资料。

但是，我的当前代码只会在单击按钮时显示房间，说明用户正在租用整个房产。如果房间数目改变，这种情况不会改变。

我试着用下拉菜单上的“改变”来做这件事，但这似乎行不通。我还试图更改顺序，似乎只有一个会触发div的隐藏/显示属性。

知道我如何使这些div‘隐藏/显示状态变化，每当用户选中框或改变他们的选择在下拉列表？

代码：

Jquery：

$("#Bedroom_2").hide();
$("#Bedroom_3").hide();
$("#Bedroom_4").hide();
$("#Bedroom_5").hide();
$("#Renting_Entire_Property").change(function() {
    if(this.checked) {
          if ($('#Number_of_Bedrooms').val() == 0 ) {
              $("#Bedroom_2").hide();
              $("#Bedroom_3").hide();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === 'Studio') {
              $("#Bedroom_2").hide();
              $("#Bedroom_3").hide();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === '1_Room') {
              $("#Bedroom_2").hide();
              $("#Bedroom_3").hide();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === '2_Rooms') {
              $("#Bedroom_2").show();
              $("#Bedroom_3").hide();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === '3_Rooms') {
              $("#Bedroom_2").show();
              $("#Bedroom_3").show();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === '4_Rooms') {
              $("#Bedroom_2").show();
              $("#Bedroom_3").show();
              $("#Bedroom_4").show();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === '5_Rooms' || '5+_Rooms') {
              $("#Bedroom_2").show();
              $("#Bedroom_3").show();
              $("#Bedroom_4").show();
              $("#Bedroom_5").show();
          } else {
              $("#Bedroom_2").hide();
              $("#Bedroom_3").hide();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          }
    } else {
      $("#Bedroom_2").hide();
      $("#Bedroom_3").hide();
      $("#Bedroom_4").hide();
      $("#Bedroom_5").hide();
    }
});

<h3>HTML</h3>

    <label for="Number_of_Bedrooms">Bedrooms</label>
    <select id="Number_of_Bedrooms" name="Number_of_Bedrooms">
      <option></option>
      <option value="Studio">Studio</option>
      <option value="1_Room">1</option>
      <option value="2_Rooms">2</option>
      <option value="3_Rooms">3</option>
      <option value="4_Rooms">4</option>
      <option value="5_Rooms">5</option>
      <option value="5+_Rooms">5+</option>
    </select>
    <br>
    <label class="custom-control custom-checkbox">
      <input type="checkbox" id="Renting_Entire_Property">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description">Check if in this listing you are renting the entire property</span>
    </label>
    <div id="Bedroom_1">Test 1
    </div>
    <div id="Bedroom_2">Test 2
    </div>
    <div id="Bedroom_3">Test 3
    </div>
    <div id="Bedroom_4">Test 4
    </div>
    <div id="Bedroom_5">Test 5
    </div>

这里是一个功能良好的小提琴。

谢谢!

谢谢“安德烈亚斯”、“巴西零”和“Jairo Cordero”，谢谢你的帮助！我发现每一种解决方案都奏效了，你们的速度太快了！再次感谢！:)

Answer 1

将事件处理程序添加到“选择”和“复选框”中，然后以代码中的选择为目标。

https://jsfiddle.net/8gvLvwg2/

$("#Bedroom_2").hide();
$("#Bedroom_3").hide();
$("#Bedroom_4").hide();
$("#Bedroom_5").hide();
$(document).on('change','#Renting_Entire_Property,#Number_of_Bedrooms',function() {
      var $checkbox = $("#Renting_Entire_Property");
    if($checkbox.prop('checked')) {
          if ($('#Number_of_Bedrooms').val() == 0 ) {
              $("#Bedroom_2").hide();
              $("#Bedroom_3").hide();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === 'Studio') {
              $("#Bedroom_2").hide();
              $("#Bedroom_3").hide();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === '1_Room') {
              $("#Bedroom_2").hide();
              $("#Bedroom_3").hide();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === '2_Rooms') {
              $("#Bedroom_2").show();
              $("#Bedroom_3").hide();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === '3_Rooms') {
              $("#Bedroom_2").show();
              $("#Bedroom_3").show();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === '4_Rooms') {
              $("#Bedroom_2").show();
              $("#Bedroom_3").show();
              $("#Bedroom_4").show();
              $("#Bedroom_5").hide();
          } else if ($('#Number_of_Bedrooms').val() === '5_Rooms' || '5+_Rooms') {
              $("#Bedroom_2").show();
              $("#Bedroom_3").show();
              $("#Bedroom_4").show();
              $("#Bedroom_5").show();
          } else {
              $("#Bedroom_2").hide();
              $("#Bedroom_3").hide();
              $("#Bedroom_4").hide();
              $("#Bedroom_5").hide();
          }
    } else {
      $("#Bedroom_2").hide();
      $("#Bedroom_3").hide();
      $("#Bedroom_4").hide();
      $("#Bedroom_5").hide();
    }
});

Answer 2

将此添加到代码中

  $("#Number_of_Bedrooms").on("change",function(){
        $("#Renting_Entire_Property").trigger("change");
    });

https://jsfiddle.net/7moon6f3/1/