CODEWITHSUNDEEP
javascripthtmlhtml-select
Praneet Dixit
Praneet Dixit

Reputation: 1425

How to make specific options to appear in select menu?

I have two select fields in a program. Both select fields contain options with values 1 to 10. the code is as below:

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

I want to achieve the following effect using JavaScript :

(Only for example) If the user has selected the option 8 in the first select field (id="noc"), the options below 8 (i.e. 9 and 10) should not be visible in the second select field (id="po").

Upvotes: 7

Views: 809

Answers (3)

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17570

You can do it with using onChange method and with querySelectorAll.

display or visibility attributes doesn't work for cross browsers. So you should recreate options.

var noc=document.getElementById("noc");
var po=document.getElementById("po");
var options=po.querySelectorAll("option");
function nochange(){
  po.innerHTML="";
  [...options].filter(x=>parseInt(x.value)<=parseInt(noc.value)).forEach(x=>{po.append(x)})
  po.value=noc.value;
  
}
<select id="noc"onChange="nochange()">
       <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>

Upvotes: 3

dqve
dqve

Reputation: 609

You can try this, when the selected option first select (noc) changes, loop over the options in the second select (po) and hide its options whose values are greater than the value of the option selected in the first 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>

Upvotes: 1

Balastrong
Balastrong

Reputation: 4464

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>

Upvotes: 0

Related Questions