web-dev-qa-db-ja.com

特定のオプションを選択メニューに表示する方法は？

プログラムに2つの選択フィールドがあります。どちらの選択フィールドにも、値が1〜10のオプションが含まれています。コードは次のとおりです。

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

JavaScriptを使用して次の効果を実現したい：

（例のみ）ユーザーが最初の選択フィールド（id="noc"）、8未満のオプション（9と10）は、2番目の選択フィールド（id="po"）。

javascripthtmlhtml-select
7
Praneet Dixit

これを試すことができます。選択したオプションが最初に選択（noc）すると、2番目の選択（po）でループし、最初の選択（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

これを試して：

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