Question

我有以下两个选择下拉列表，这个用于Office位置：

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

这个分区为：

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

我要做的是根据所选的Office隐藏某些部门。例如，如果用户从办公室下拉列表中选择“Glendale”，我想隐藏Divisions下拉列表中的OMG-Accounting选项。我只是在学习JS并且有一些东西可以隐藏整个部门的下拉，但我怎样才能隐藏个别选项呢？ 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

将id或name或class属性添加到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 像这样改变html。为每个optgroup分配独特的标签例如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'

您可以使用class,label or name

以这种方式隐藏多个optgroup

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();
});

工作小提琴：https://jsfiddle.net/8et5raex/

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

在名称为optgroup

的选择框下，label='OMG-Accounting'定位division

Answer 3

例如，如果用户选择＆＃34; Glendale＆＃34;从办公室下拉菜单中，我想隐藏分部下拉菜单中的OMG-Accounting选项

在现有代码中尝试此操作

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

选择特定选项组并隐藏它，此时您正在隐藏整个选择元素。

其他选项

1）按选项隐藏VALUE

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

2）隐藏选项TEXT

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

3）按标签隐藏OptionGroup

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

HTML / JS隐藏根据另一个选定值选择选项

3 个答案: