Sélectionner une option dont la valeur est x

Version imprimable

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

J'ai l'id du pays lstCountry.value
Je cherche dans oCurrencies, la ligne dont l'id correspond à l'id du pays
Dans cette ligne je prends le currency_code
Je sélectionne l'option dont la valeur est ce currency_code

J'ai commencé à écrire ce bout de code mais je coince:
Code:

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. }); });

Bonjour,

Code:

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

05/10/2020, 07h11
moimp

Ah, merci, c'est super.

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:

elemSelect.value = "mon choix";

Exemple, en partant de ce code HTML :

Code:

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:

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.