Минус значение опции для себя на клик

Question

Я пытаюсь обновить значение параметра selectbox после клика.Следует вычесть выбранное значение самому себе.

    <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 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>

функция standardRoom

    function standardRoom()
  {
     $('#selectBoxStandard option').val(Number($("#selectBoxStandard").val()) - Number($("#selectBoxStandard option").val()));
  }

Если выбранное значение равно 3 после нажатия кнопкиоставшееся значение должно обновиться до:

    <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>
     </select>
    </div>

Answer 1

Для удаления последних потомков из #selectBoxStandard на основе значения option:

$('button').on('click', standardRoom);

function standardRoom() {
  $('#selectBoxStandard').find("option:nth-last-child(-n+" + $('#selectBoxStandard').val() + ")").remove();
}

<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>
  <button>Update</button>
</div>

Answer 2

добавить это js

let total = 7
function changed(){
    let selBox = document.getElementById('selectBoxStandard');
    let value = selBox.value;
    //remove all options
    while(selBox.children.length > 0) selBox.removeChild(selBox.children[0]);
    //add new options according to value;
    for(let i = 0;i<7-value+1;i++){
        selBox.innerHTML += `<option value="${i}">${i}</option>` 
    }
    //resets value
    selBox.value = value;
}

добавить onchange на ваш выбор

<select onchange="changed()"  required tabindex="10" id="selectBoxStandard" name="n_rooms">

, если вы хотите изменить на btn, нажмите это

<div onclick="changed()" 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>

Answer 3

Это будет работать, но, вероятно, это можно сделать немного проще или лучше:

function standardRoom(){
    var last_option = $('#selectBoxStandard option:last-child').val();
    var selected_option = $('#selectBoxStandard').val();
    $("#selectBoxStandard option").each(function() {
        if($(this).val() > (last_option - selected_option)){
            $(this).remove();
        }
    });
}