asked on

Display values select

Good morning all !

I can't find a way to hide a value from a select except in this way:

SEL_Paiement.options[1].style.display = "block";
SEL_Paiement.options[2].style.display = "none";
SEL_Paiement.options[3].style.display = "block";
SEL_Paiement.options[4].style.display = "block";
SEL_Paiement.options[5].style.display = "block";
SEL_Paiement.options[6].style.display = "block";
SEL_Paiement.options[7].style.display = "block";

Open in new window

I wish I could do the same thing but with values and not options[1], like (I say a big mistake):

SEL_Paiement.value = "Hello".style.display = "block";

Open in new window

Can you help me please ?

cordially

ASKER CERTIFIED SOLUTION

Jaber Ahmad

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Michel Plungjan

You cannot reliably hide options. You can remove them

Some browsers will allow

SEL_Paiement.options[1].setAttribute('disabled', true);

Open in new window

and then have

select option[disabled] { display: none; }

Open in new window

in css

but the most cross browser safe version is to remove them and add them when needed:

window.addEventListener("load",function() {
  const allOpts = document.querySelectorAll("#SEL_Paiement options");
  document.getElementById("reset").addEventListener("click",function() {
    document.getElementById("SEL_Paiement").innerHTML=allOpts; 
  });
});

Open in new window