Disons que j'ai obtenu cette étiquette de sélection avec 4 chambres :

<select name ="room">
   <option value="Room1">Room 1</option>
   <option value="Room2">Room 2</option>
   <option value="Room3">Room 3</option>
   <option value="Room4">Room 4</option>
</select><br>
<label for="guests">Total guests:</label>
<input class="bookinfo" type="number" name="guests" min="1" max="8" placeholder="1-8" required>

Après cette balise, j'ai une entrée qui montre combien d'invités peuvent être dans chaque pièce. Cependant, la chambre 2 est pour 10 personnes et non 8. Y a-t-il un moyen de changer cela avec jquery ?

1
user13443119 9 oct. 2020 à 16:26

1 réponse

Meilleure réponse

Comme vous pouvez le voir, je crée une fonction de vérification à chaque changement de pièce max et placeholder changera :

function CheckGuest(el){
 if(el.value == 'Room2'){
 document.getElementById("bookinfo").max = 10;
 document.getElementById("bookinfo").placeholder = "1-10";

 }else{
  document.getElementById("bookinfo").max = 8;
 document.getElementById("bookinfo").placeholder = "1-8";
 }

}
<select name ="room" onChange="CheckGuest(this)">
   <option value="Room1">Room 1</option>
   <option value="Room2">Room 2</option>
   <option value="Room3">Room 3</option>
   <option value="Room4">Room 4</option>
</select><br>
<label for="guests">Total guests:</label>
<input class = "bookinfo" id="bookinfo"   type="number" name="guests" min = "1" max ="8" placeholder="1-8" required>

Ce que je change :

  • Ajoutez un événement onChange pour une fonction active chaque fois que vous changez de pièce
  • Ajoutez ID à input pour le sélectionner avec javascript
  • Créer une fonction pour modifier la valeur max et placeholder.

Je vous suggère de lire ce site Web Vous n'avez peut-être pas besoin de jQuery

2
Simone Rossaini 9 oct. 2020 à 13:30