Удаление элемента из поля выбора в зависимости от значения поля выбора

Question

У меня есть этот код, который зацикливает количество доступных номеров.

<div class="pull-left col-xs-12 col-sm-4 col-md-4">
      <?php
         $option = [];
         $value_3 = isset($rooms['total_available_room']) ? 
         $rooms['total_available_room'] : 0;

           for ($i=0; $i <= $value_3; $i++) {
              $option[$i] = $i;
           }
        ?>

{{ Form::label('rooms', 'No. of rooms: ',['style' => 'color:black']) }}
{{ Form::select('n_rooms', $option, null, ['required', 'tabindex' => '10', 'id' => 'selectBox']) }}
</div>

<div class="button-style-1" style="padding-bottom:80px" style="padding-bottom:40px"><a href="javascript:removeItem()" ><i class="fa fa-calendar"></i><span class="mobile-visibility">BOOK</span></a></div>

Теперь, как убрать уменьшение количества доступных комнат после того, как пользователь нажмет на кнопку «Забронировать». Например, если значение выбора равно 4, а доступная комната равна 7, после нажатия кнопки значение выбора должно быть 0-3.

    function removeItem()
  {
     $("#selectBox $option[0] - $option[]").remove();
  }

Как мне сделать это правильно?

Добавлен отрендеренный HTML

                      <tr class="table-products-list pos-center">
                      <td class="products-image-table" style="padding-top:0px"><img alt="Products Image 1" src="http://localhost/site/public/storage/cover_images/Standard-room_1543751302.jpg" class="img-responsive"></td>
                      <td class="title-table">
                          <div class="room-details-list clearfix">
                              <div class="pull-left">
                                  <h5>Standard Room</h5>
                              </div>
                              <div class="pull-left room-rating">
                                  <ul>
                                      <li><i class="fa fa-star"></i></li>
                                      <li><i class="fa fa-star"></i></li>
                                      <li><i class="fa fa-star"></i></li>
                                      <li><i class="fa fa-star"></i></li>
                                      <li><i class="fa fa-star inactive"></i></li>
                                  </ul>
                              </div>
                          </div>
                          <div class="list-room-icons clearfix">
                              <ul>
                                  <li title="Free Wifi"><i class="fa fa-wifi"></i></li>
                                  <li title="Parking Space"><i class="fa fa-car"></i></li>
                                  <li title="Airconditioned Room"><i class="fa fa-snowflake-o"></i></li>
                                  <li title="Televisions"><i class="fa fa-television"></i></li>
                                  <li title="Shower"><i class="fa fa-shower"></i></li>
                                  <li title="Breakfast"><i class="fa fa-spoon"></i></li>
                              </ul>
                          </div>
                          <p style="margin:0px"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a class="active-color" href="standard">[...]</a> </p>
                          <div class="row">
                              <div class="pull-left col-xs-12 col-sm-4 col-md-4">

                                  <label for="adult" style="color:black">No. of Adult: </label>
                                  <select required tabindex="9" name="n_adult"><option value="1">1</option><option value="2">2</option></select>
                              </div>
                              <div class="pull-left col-xs-12 col-sm-4 col-md-4">

                                  <label for="children" style="color:black">No. of Children: </label>
                                  <select required tabindex="10" name="n_children"><option value="0">0</option><option value="1">1</option></select>
                              </div>

                              <div class="pull-left col-xs-12 col-sm-4 col-md-4">

                                  <label for="rooms" style="color:black">No. of rooms: </label>
                                  <select required tabindex="10" id="selectBoxStandard" name="n_rooms"><option value="0">0</option><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>
                          </div>
                      </td>
                      <td>
                          <h3>P2000</h3>
                      </td>
                      <td>
                          <div class="pull-right">
                              <h4 style="color:red">7 Rooms Available</h4>
                          </div>
                          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          <div class="button-style-1" style="padding-bottom:80px" style="padding-bottom:40px"><a href="javascript:standardRoom()" ><i class="fa fa-calendar"></i><span class="mobile-visibility">BOOK
                                  </span></a></div>
                      </td>
                  </tr>

Answer 1

Подключите обработчик событий к событию изменения выбора.

Когда срабатывает это событие, рассчитайте разницу между общим количеством доступных комнат и выбранным пользователем параметром.

Скрыть все параметры со значением, превышающим эту разницу, и показать все остальные.

Предполагая, что последний вариант всегда будет наибольшим числом комнат, этот фрагмент будет работать.

$('#selectBoxStandard').change(function() {
  var sel = $(this);
  var opts = this.options;
  var max = parseInt(opts[opts.length - 1].value);
  var val = parseInt($(sel).val());
  var remaining = max - val;
  $(opts).each(function(i, e) {
    if (parseInt($(e).val()) <= remaining) {
      $(e).show();
    } else {
      $(e).hide();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pull-left col-xs-12 col-sm-4 col-md-4">

  <label for="rooms" style="color:black">No. of rooms: </label>
  <select required tabindex="10" id="selectBoxStandard" name="n_rooms">
    <option value="0">0</option>
    <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>