IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Sélectionner une option dont la valeur est x


Sujet :

JavaScript

  1. #1
    Membre éclairé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 571
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 571
    Points : 803
    Points
    803
    Par défaut Sélectionner une option dont la valeur est x
    Bonjour,

    J'ai un champ lstCountry et un champ lstCurrency. Par défaut, je veux sélectionner l'option de lstCurrency en fonction de la valeur sélectionnée dans lstCountry, c'est à dire celle où la valeur de l'option correspond à la propriété currency_code.
    Dans oCurrencies, l'id correspond au code du pays, currency_code est le code de la devise, il correspond à la valeur de l'option de lstCurrency.
    EDIT: En résumé:
    1. J'ai l'id du pays lstCountry.value
    2. Je cherche dans oCurrencies, la ligne dont l'id correspond à l'id du pays
    3. Dans cette ligne je prends le currency_code
    4. Je sélectionne l'option dont la valeur est ce currency_code


    J'ai commencé à écrire ce bout de code mais je coince:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    "use strict";
     
    // Constantes
    const
    	lstCountry	= window.document.querySelector('#country')
    	,lstCurrency= window.document.querySelector('#currency')
    	,oCurrencies = [{"id":"AD","currency_code":"EUR","currency_name":"euro"},{"id":"AE","currency_code":"AED","currency_name":"dirham des \u00c9mirats arabes unis"}] // Extrait
    	;
     
    lstCountry.addEventListener('change', function(e) {
    	oCurrencies.forEach(function (elem) {
    		//console.log(elem.id);
    		//console.log(lstCountry.value);
    		if (elem.id != lstCountry.value) {
    			continue;
    		}
    		lstCurrency.options[lstCurrency.selectedIndex] = true; // Je bloque ici. Cette ligne n'est pas bonne.
    	});
    });

  2. #2
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 396
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 396
    Points : 4 825
    Points
    4 825
    Par défaut
    Bonjour,

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
     
    lstCountry.addEventListener('change', function(e) {
      //supprimer l'attribut "selected" de toutes les options à chaque change.
      Array.from(lstCurrency.options)
      .forEach(function(option) {
        option.removeAttribute('selected');
      });
      //parcourir le tableau d'objet
      oCurrencies
        .forEach(function(elem) {
          if (elem.id == lstCountry.value) {
           //parcourir les options de la liste 2 pour attribuer "selected" à l'option correspondante
            Array.from(lstCurrency.options)
           .forEach(function(option) {
              if (option.value == elem.currency_code)
                option.setAttribute('selected', 'selected');
            });
          }
        });
    });
    Remarque : On peut aussi sélectionner une option dans la deuxième liste <select id="currency">... à moins que tu la désactives ...

  3. #3
    Membre éclairé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 571
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 571
    Points : 803
    Points
    803
    Par défaut
    Ah, merci, c'est super.

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut Complément d'informations
    Bonjour,
    on peut modifier l'option sélectionnée d'un élément HTML <select> directement en lui affectant une value, si celle-ci existe dans les valeurs des <option> l'option correspondante sera alors sélectionnée.

    Nota : Ceci ne fonctionne pas avec les <select multiple>.

    On peut donc faire directement :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    elemSelect.value = "mon choix";
    Exemple, en partant de ce code HTML :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <select class="select-group" data-lang="french">
      <option value="un">Un
      <option value="deux">Deux
      <option value="trois">Trois
      <option value="quatre">Quatre
      <option value="cinq">Cinq
    </select>
    <select class="select-group" data-lang="spanish">
      <option value="un">Uno
      <option value="deux">Dos
      <option value="trois">Tres
      <option value="quatre">Cuatro
    </select>
    <select class="select-group" data-lang="english">
      <option value="un">One
      <option value="deux">Two
      <option value="trois">Three
      <option value="quatre">Four
      <option value="">????
    </select>
    <select class="select-group" data-lang="deush">
      <option value="un">Eine
      <option value="deux">Zwei
      <option value="trois">Drei
      <option value="quatre">Vier
      <option value="trois">Drei
      <option value="">????
    </select>
    et en utilisant le code JavaScript suivant :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    const lstSelect = document.querySelectorAll(".select-group");
    lstSelect.forEach((el) => {
      el.addEventListener("change", (e) => {
        lstSelect.forEach((sel) => {
          if (sel !== e.target) {
            sel.value = e.target.value;
          }
        })
      });
    });
    on a quatre <select> liés, on pourrait en avoir bien plus, avec un minimum de code perfectible.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 5
    Dernier message: 11/07/2018, 14h00
  2. Réponses: 1
    Dernier message: 01/10/2015, 11h52
  3. [XL-2007] Sélectionner une feuille dont le nom est contenu dans une cellule
    Par Nonno 94 dans le forum Macros et VBA Excel
    Réponses: 4
    Dernier message: 30/06/2014, 21h47
  4. Sélectionner une option par sa valeur
    Par Rachel dans le forum Téléchargez
    Réponses: 0
    Dernier message: 30/01/2012, 23h50
  5. Réponses: 5
    Dernier message: 28/11/2011, 15h47

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo