J'essaie de mettre à jour la valeur de l'option de zone de sélection après avoir cliqué. Il doit soustraire la valeur sélectionnée à lui-même.

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

Fonction standardRoom

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

Si la valeur sélectionnée est 3 après avoir cliqué, la valeur restante doit être mise à jour vers:

    <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>
0
Rei 27 janv. 2019 à 07:56

3 réponses

Meilleure réponse

Pour supprimer les derniers enfants de #selectBoxStandard en fonction de la valeur 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>
1
SLePort 27 janv. 2019 à 05:43

Ajouter ce 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;
}

Ajouter onchange sur votre sélection

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

Si vous voulez changer sur btn cliquez sur utiliser ceci

<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>
1
Maheer Ali 27 janv. 2019 à 05:45

Cela fonctionnera mais pourrait probablement être fait un peu plus facilement ou mieux:

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();
        }
    });
}
1
Second2None 27 janv. 2019 à 05:45