11528 sujets

JavaScript, DOM et API Web HTML5

Appliquer des limites aux fonctionnalités personnalisées d'un produi

Je crée une page unique qui permettra aux utilisateurs d'acheter des couvertures. Les menus déroulants fourniront une personnalisation (en commençant par la couleur, la taille, puis le poids.) Je souhaite que les options de poids aient des plages limitées en fonction de la taille. Par exemple, si l'utilisateur sélectionne une grande couverture, je souhaite qu'il choisisse ensuite un poids, mais uniquement entre 5 unités prédéfinies.

Est-ce quelque chose que je devrais mettre en place par le biais d'instructions if else, ou existe-t-il une autre méthode plus logique? En fin de compte, un administrateur créera ces conditions via un formulaire, qui sera ensuite présenté sur la page du produit.
Coucou!
Je suis vraiment pas sur d'avoir très bien comprit mais je penses que la meilleure solution est d'utiliser un dictionnaire qui aurait comme clés les différentes tailles et comme valeur un tableau des poids disponibles:

const dispo = {
    petite: [
        100,
        200
    ],
    moyenne: [
        200,
        300,
        400
    ],
    grande: [
        400,
        500,
        600,
        700
    ]
}
Bonjour,
Une solution possible sans JS serait d'avoir une seule liste déroulante pour le couple taille/poids en utilisant éventuellement des optgroup pour présenter les unités de poids de chaque taille.
Par exemple :
<label for="taille-poids">Taille et poids :</label>
<select name="taille-poids" id="taille-poids" required>
  <option value="" selected>Choisir une taille et un poids</option>
  <optgroup label="Taille petite">
    <option value="petit-1">Petit Unité 1</option>
    <option value="petit-2">Petit Unité 2</option>
    <option value="petit-3">Petit Unité 3</option>
  </optgroup>
  <optgroup label="Taille moyenne">
    <option value="moyen-1">Moyen Unité 1</option>
    <option value="moyen-2">Moyen Unité 2</option>
    <option value="moyen-3">Moyen Unité 3</option>
  </optgroup>
  <optgroup label="Taille grande">
    <option value="grand-1">Grand Unité 1</option>
    <option value="grand-2">Grand Unité 2</option>
    <option value="grand-3">Grand Unité 3</option>
  </optgroup>
</select>


Si tu préfères avoir deux listes déroulantes, il faudra en effet utiliser quelques instructions en JS pour modifier les poids proposés en fonction de la taille sélectionnée.
Sujet clos
Aller à