11528 sujets

JavaScript, DOM et API Web HTML5

Changer contenu d'un select avec javascript

Bonjour, j'aimerais savoir comment chnager le contenu d'un select selon une option choisie sans un select précédant.

Voici mon code html 
<div id="formulaire">
    <form action="http:localhost:81/cible.php" method="POST">
    <div class="premierechambre">
    <div id="chambres"> Chambres </div>
    <div id="type"><label>Type:</label>
    <select id="selectId">
        <option value="single"> Single </option>
        <option value="double"> Double </option>
        <option value="triple"> Triple </option>
        <option value="quadruple"> Quadruple</option>
    </select>
<p><label for="nbadultes"> Adulte :</label>
    <select id="nbadultes">
      <option >1</option>
      <option >2</option>
      <option >3</option>
      <option >4</option>
    </select></p>
  <p><label for="nbenfants">Enfant(0-12ans) :</label>
    <select id="nbenfants"  onchange="calcul()">
      <option>0</option>
      <option>1</option>
      <option>2 </option>
      <option>3</option>
      <option>4</option>
    </select>
  </p>

Donc je voudrais que le nombre d'adultes et d'enfants change en fonction du type de chambre choisie.

A savoir single un adulte ou un enfant

double : un adulte et un enfant ou deux adultes ou deux enfants ...etc
Pouvez vous me proposer une fonction qui pourrait regler tout ça?
Merci d'avance
Modérateur
Salut,


anyas a écrit :
Bonjour, j'aimerais savoir comment chnager le contenu d'un select selon une option choisie sans un select précédant.

L'idée ca va etre de remplir ton second select en fonction du premier.
Donc avec un eventListner sur ton select qui va se déclencher au "change" tu récupère la value et selon ta valeur tu va remplir ou non les select (voir les creer).

Pour rajouter une option a un select ca ressemble a ça :
var select = document.getElementById('selectElementId');
    var opt = document.createElement('option');
    opt.value = 1;
    opt.innerHTML = '1';
    select.appendChild(opt);
}

(premier lien trouvé en tapant "js create select options" dans ecosia : https://stackoverflow.com/questions/8674618/adding-options-to-select-with-javascript)
Et tu peux en faire une boucle comme dans le post en lien si tu en veux plusieurs.

anyas a écrit :
Donc je voudrais que le nombre d'adultes et d'enfants change en fonction du type de chambre choisie.
A savoir single un adulte ou un enfant
double : un adulte et un enfant ou deux adultes ou deux enfants ...etc

Donc la au change tu fais un "if" ou un "switch" pour vérifier la value de ton premier select et tu rempli les deux autres en conséquence.

anyas a écrit :
Pouvez vous me proposer une fonction qui pourrait régler tout ça?

Malheureusement non, on peut t'aiguiller, te corriger etc mais faudra mettre la main à la patte. (Ou sinon jpeux te faire un devis Smiley lol )

Allez courage ! Smiley cligne
Sujet clos
Aller à