如何允许基于输入的多个选择选项 - jQuery

Question

假设，如果people 输入值为1，那么值1 和2 的选择选项将是可选的，如果people 值是>1，则其余选项将是可选的。

是否可以允许根据输入选择多个选择选项？

$(document).ready(function() {

    $(document).on("input", "#people, #intRooms", function() {

        var people = $('#people').val();
        var intRooms = $('#intRooms').val();
        if (people == 1) {
            $('#intRooms').val('1').change();
        } else {
            $('#intRooms').val('3').change();
        }

        $('#cost').html('The cose is ' + (people * intRooms));

    });

    $("#people").trigger("input");
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
People:<input name="people" id="people" type="number">
<div class="container">
   <div>
      <b>Intended Rooms:</b><br>
      <select id="intRooms">
         <option value="1">1 Room</option>
         <option value="2" >2 Rooms</option>
         <option value="3">3 Rooms</option>
         <option value="4">4 Rooms</option>
         <option value="5" >5 Rooms</option>
      </select>
   </div>
   Cost: <div id="cost">
   </div>
</div>

Answer 1

如果值不大于 1，则不显示其他选项

$(document).ready(function() {
    $(document).on("input", "#people, #intRooms", function() {
        var people = $('#people').val();
        var intRooms = $('#intRooms').val();
        if (people > 1) {
            var html = '<option value="1">1 Room</option><option value="2" >2 Rooms</option><option value="3">3 Rooms</option><option value="4">4 Rooms</option><option value="5" >5 Rooms</option>'
            $('#intRooms').html(html);
        } else {
            var html = '<option value="1">1 Room</option><option value="2" >2 Rooms</option>'
            $('#intRooms').html(html);
        }

        $('#cost').html('The cose is ' + (people * intRooms));

    });

    $("#people").trigger("input");
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
People:<input name="people" id="people" type="number">
<div class="container">
   <div>
      <b>Intended Rooms:</b><br>
      <select id="intRooms">
         <option value="1">1 Room</option>
         <option value="2" >2 Rooms</option>
         <option value="3">3 Rooms</option>
         <option value="4">4 Rooms</option>
         <option value="5" >5 Rooms</option>
      </select>
   </div>
   Cost:<br>
   <div id="cost">
   </div>
</div>

Answer 2

有几种方法，但我会这样：通过添加数据属性对选项进行分组（在这种情况下，我将其命名为 data-group，但您可以随意命名）然后在更改时添加或通过data-group 值选择所需选项，将disabled 属性删除。

$(document).ready(function() {

$(document).on("input", "#people, #intRooms", function() {

    var people = $('#people').val();
    var intRooms = $('#intRooms').val();
    if (people == 1) {
        $('#intRooms option[data-group="single"]').removeAttr('disabled');
        $('#intRooms option[data-group="more"]').attr('disabled', 'disabled');
    } else {
        $('#intRooms option[data-group="more"]').removeAttr('disabled');
        $('#intRooms option[data-group="single"]').attr('disabled', 'disabled');
    }

$('#cost').html('The cose is ' + (people * intRooms));

});
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
People:<input name="people" id="people" type="number">
<div class="container">
   <div>
      <b>Intended Rooms:</b><br>
      <select id="intRooms">
         <option data-group="single" value="1">1 Room</option>
         <option data-group="single" value="2" >2 Rooms</option>
         <option data-group="more" value="3">3 Rooms</option>
         <option data-group="more" value="4">4 Rooms</option>
         <option data-group="more" value="5" >5 Rooms</option>
      </select>
   </div>
   Cost:<br>
   <div id="cost">
   </div>
</div>

现在由您来选择初始状态，是否应该在开始时禁用某些选项。