How to hide option from select using jquery or javascript

Question

I have the following two select boxes

<select id="first" onchange="hideShowOptions(this.value)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

and

<select id="second" >
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
</select>

and follwoing is my script

function hideShowOptions(selectedValue) {
    if(selectedValue == 1 || selectedValue == 2 || selectedValue == 3) {
        $('#second').children('option[value="8"]').css('display','none');
    } else {
        $('#second').children('option[value="8"]').css('display','inline');
    }
}

It correctly sets style="display: none" as per the above code but the option is not hidden from the UI and I am still able to see the option.

The goal is to hide certain option from second select based on the value selected from first select.

Possible duplicate: https://stackoverflow.com/questions/1271503/hide-options-in-a-select-list-using-jquery — Gary Thomas, Sep 17 '18 at 10:29
I'd recommend you set the disabled attribute instead so it works across all browsers. Or create a copy of your select and remove the actual — gugateider, Sep 17 '18 at 10:31
https://codepen.io/gugateider/pen/qMJBGL I wouldn't use hide and show though, leaving it disabled gives a better user experience — gugateider, Sep 17 '18 at 10:38
Possible duplicate of [Hide options in a select list using jQuery](https://stackoverflow.com/questions/1271503/hide-options-in-a-select-list-using-jquery) — Alive to die - Anant, Sep 17 '18 at 10:40

score 0 · Answer 1 · answered Sep 17 '18 at 10:42

The following is the answer, courtesy to gugateider

function hideShowOptions(selectedValue){
    if(selectedValue == 1 || selectedValue == 2 || selectedValue == 3)
    {
        $('#second').children('option[value="8"]').attr('disabled', ''); // if doesn't support will just disable
      //   $('#second').children('option[value="8"]').hide(); // if supports will hide
    }else{
        $('#second').children('option[value="8"]').removeAttr('disabled'); // if doesn't support will just enable
        //$('#second').children('option[value="8"]').show(); // if it supports, it will display
    }

}

score 0 · Answer 2 · answered Sep 17 '18 at 10:59

<select id="first" onchange="hideShowOptions(this.value)">
                              <option value="1">1</option>
                              <option value="2">2</option>
                              <option value="3">3</option>
                              <option value="4">4</option>
 </select>

function hideShowOptions(x) {

var hideTrigger = [1, 2 ,3];

switch (x){
case hideTrigger[0].toString():
$('#second').children('option[value="8"]').css('display','none');
break;
case hideTrigger[1].toString():
$('#second').children('option[value="8"]').css('display','none');
break;
case  hideTrigger[2].toString():
$('#second').children('option[value="8"]').css('display','none');
break;
default:
$('#second').children('option[value="8"]').css('display','block');
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="first" onchange="hideShowOptions(this.value)">
                              <option value="1">1</option>
                              <option value="2">2</option>
                              <option value="3">3</option>
                              <option value="4">4</option>
                            </select>
                            
                            <select id="second" >
                              <option value="5">5</option>
                              <option value="6">6</option>
                              <option value="7">7</option>
                              <option value="8">8</option>
                            </select>

You should explain you answer. Please have a look to our Code of conduct: https://stackoverflow.com/conduct — Alberto, Sep 17 '18 at 11:01

Andrei Cleland · Answer 3 · 2022-12-15T06:11:59.330

Using only vanilla js:

const second = document.getElementById( "second")
const eight  = document.getElementById( "eight" )

function hideShowOptions( selectedValue ){
    if ( 
         selectedValue == 1 || 
         selectedValue == 2 || 
         selectedValue == 3
       ){
         eight.style.display = "none"
         second.value = 5 
           // prevents bug if user reselects 1,2 or 3
           // after selecting 8
        } else {
         eight.style.display = "inline"
        }
}

#eight {
  display: none
}

<select id="first" onchange="hideShowOptions(this.value)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

<select id="second" >
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8" id="eight">8</option>
</select>

How to hide option from select using jquery or javascript

3 Answers3