HTML / JS隐藏基于其他选定值的选择选项

Question

I have the following two select drop-downs, this one for Office location:

<label class="label_select" for="office">Office<span class="required"><font color="red">*</font></span>
        </label>
        <select class="select" name="office" onchange="divisionSelectHandler(this)" required>
            <option selected disabled style="display:none;" value="">Select Office</option>
            <optgroup label ="Arizona">
                <option value="Glendale">Glendale</option>
                <option value="Mesa">Mesa</option>
                <option value="AZRemote">Remote</option>
                <option value="Tucson">Tucson</option>
                <option value="Yuma">Yuma</option>
            </optgroup>
            <optgroup label="Oregon">   
                <option value="ORRemote">Remote</option>
                <option value="Salem">Salem</option>
            </optgroup>
            <optgroup label="Utah">
                <option value="Orem">Orem</option>
                <option value="UTRemote">Remote</option>
                <option value="Taylorsville">Taylorsville</option>
            <optgroup>

        </select>

and this one for Division:

<label class="label_select" for="division">Division<span class="required"><font color="red">*</font></span>
        </label>
        <select class="select" name="division" id="divisionstd" required>
            <option selected disabled style="display:none;" value="">Select Division</option>
            <option value="EarlyIntervention">Early Intervention</option>
            <option value="Employment_Services">Employment Services</option>
            <option value="Family_Services">Family Services</option>
            <optgroup label="OMG-Accounting">OMG-Accounting>
                <option value="AccountingAP">AP</option>
                <option value="AccountingAR">AR</option>
                <option value="AccountingGL">GL</option>
            </optgroup>
            <option value="HR">OMG-HR</option>
            <option value="Residential_Services">Residential</option>
        </select>

What I am trying to do is hide certain Divisions based on the Office that is selected. For example, if a user selects "Glendale" from the office drop-down, I would like to hide the OMG-Accounting options from the Divisions drop-down. I am just learning JS and have something that hides the whole Divisions drop-down, but how can I hide individual options? JS:

<script>
function hide(){
var division = document.getElementById('divisionstd');
division.style.visibility = 'hidden';
}

function show(){
var division = document.getElementById('divisionstd');
division.style.visibility = 'visible';
}
function divisionSelectHandler(select){
if(select.value == 'Mesa'){
hide();
}}

</script>

Answer 1

Add id or name or class attribute to your optgroup

<optgroup label="OMG-Accounting" name="test54" id="test54">OMG-Accounting>
                <option value="AccountingAP">AP</option>
                <option value="AccountingAR">AR</option>
                <option value="AccountingGL">GL</option>
            </optgroup>

JS :

function divisionSelectHandler(select){

    if(select.value == 'Glendale'){
            var ele = document.getElementById('test54')
            ele.style.display = 'none'
    }
}

OR change html like this one.Assign unique lable to each optgroup eg omgaccounting

<optgroup label="omgaccounting">OMG-Accounting>
                <option value="AccountingAP">AP</option>
                <option value="AccountingAR">AR</option>
                <option value="AccountingGL">GL</option>
</optgroup>

JS :

var arrEle = document.querySelectorAll('optgroup[label="omgaccounting"]');;

arrEle[0].style.display = 'none'

You can hide multiple optgroup in this way using class,label or name

Answer 2

$("select[name=office]").on("change", function() {
    var getValue  = $(this).val();
  var targetGroup = $("select[name=division] optgroup[label='OMG-Accounting']");
  (getValue=="Glendale") ? targetGroup.hide() : targetGroup.show();
});

working fiddle : https://jsfiddle.net/8et5raex/

$("select[name=division] optgroup[label='OMG-Accounting']");

targets optgroup with label='OMG-Accounting' under selection box with name division

Answer 3

For example, if a user selects "Glendale" from the office drop-down, I would like to hide the OMG-Accounting options from the Divisions drop-down

Try this in your existing code,

    function divisionSelectHandler(select){    
        if(select.value == 'Glendale'){
           $('divisionstd optgroup[label="OMG-Accounting"]').hide();
        }
    }

Select specific option group and hide it, Right now you are hiding entire select element.

Other options

1) Hide by option VALUE

$('divisionstd option[value="Family_Services"]').hide();

2) Hide by option TEXT

$('divisionstd option[text="OMG-HR"]').hide();

3) Hide OptionGroup by label

 $('divisionstd optgroup[label="OMG-Accounting"]').hide();