web-dev-qa-db-fra.com

Comment faire apparaître des options spécifiques dans le menu de sélection?

J'ai deux champs de sélection dans un programme. Les deux champs de sélection contiennent des options avec les valeurs 1 à 10. le code est comme ci-dessous:

<select id="noc">
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
       <option value="4">4</option>
       <option value="5">5</option>
       <option value="6">6</option>
       <option value="7">7</option>
       <option value="8">8</option>
       <option value="9">9</option>
       <option value="10">10</option>
</select><br/>

<!--Some text---->

<select id="po">
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
       <option value="4">4</option>
       <option value="5">5</option>
       <option value="6">6</option>
       <option value="7">7</option>
       <option value="8">8</option>
       <option value="9">9</option>
       <option value="10">10</option>
</select>

Je souhaite obtenir l'effet suivant en utilisant JavaScript:

(Uniquement par exemple) Si l'utilisateur a sélectionné l'option 8 dans le premier champ de sélection (id="noc"), les options ci-dessous 8 (c'est-à-dire 9 et 10) ne doivent pas être visibles dans le deuxième champ de sélection (id="po").

javascripthtmlhtml-select
7
Praneet Dixit

Vous pouvez essayer ceci, lorsque l'option sélectionnée first select (noc) change, bouclez sur les options du second select (po) et masquez ses options dont les valeurs sont supérieures à la valeur de l'option sélectionnée dans le premier select (noc).

const noc = document.getElementById('noc');
const po = document.getElementById('po');

noc.addEventListener('change', (e) => {
  [...po.children].forEach(child => {
    if (Number(child.getAttribute('value')) > e.target.value) {
      return child.style.display = 'none'
    }
  })
});
<select id="noc">
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
       <option value="4">4</option>
       <option value="5">5</option>
       <option value="6">6</option>
       <option value="7">7</option>
       <option value="8">8</option>
       <option value="9">9</option>
       <option value="10">10</option>
</select><br/>

<!--Some text---->

<select id="po">
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
       <option value="4">4</option>
       <option value="5">5</option>
       <option value="6">6</option>
       <option value="7">7</option>
       <option value="8">8</option>
       <option value="9">9</option>
       <option value="10">10</option>
</select>
1
dqve
const max = 10;

var items = [...Array(max).keys()]

var noc = document.getElementById("noc");
var po = document.getElementById("po");

items.forEach(n => {
  var opt = document.createElement("select");
  opt.value = n;
  noc.appendChild(opt);
  po.appendChild(opt);
});

noc.addEventListener("change", e => {
  var selected = e.target.value;
  po.querySelectorAll("option").forEach((el, index) => {
    if (selected < index) {
      el.style.display = "visible";
    } else {
      el.style.display = "none";
    }
  });
});
.invisible {
  display: none;
}
<select id="noc">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select><br/>

<!--Some text---->

<select id="po">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
0
Balastrong

Essaye ça:

document.getElementById("noc").addEventListener("change", function() {
     let val = this.value;
     document.getElementById("po").childNodes.forEach(opt => {
          if(Number(opt.value) <= Number(val))
               opt.style.display = 'none';
     })
});
<select id="noc">
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
       <option value="4">4</option>
       <option value="5">5</option>
       <option value="6">6</option>
       <option value="7">7</option>
       <option value="8">8</option>
       <option value="9">9</option>
       <option value="10">10</option>
</select><br/>

<!--Some text---->

<select id="po">
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
       <option value="4">4</option>
       <option value="5">5</option>
       <option value="6">6</option>
       <option value="7">7</option>
       <option value="8">8</option>
       <option value="9">9</option>
       <option value="10">10</option>
</select>
0
Majed Badawi