javascript - 在双下拉选择选项中选择选项时显示输入文本

Question

假设我想创建一个双下拉选择选项，其中第二个下拉列表根据第一个下拉选项的选择而变化。我已经想出了如何做到这一点。但是我的第一个下拉选项是“其他”，如果我在第一个下拉列表中选择“其他”而不是第二个下拉选项列表，我希望出现一个输入文本框。到目前为止，我已经能够显示输入文本框，但第二个下拉选项列表也出现(未定义)。如何让第二个下拉选项列表消失？另外，如果第一个下拉列表中的某个选项不需要或没有第二个下拉选项列表，我该如何编写代码？

这是我的脚本示例(我只更改了类别名称):

    <form name="search" method="get">
        <select name="cat" id="cat" size="1" onChange="redirect(this.options.selectedIndex)">
            <option selected disabled>Category</option>          
            <option value="fruit">Fruit</option>
            <option value="music">Music</option>
            <option value="vegetable">Vegetable</option>
            <option value="book">Book</option>
            <option value="other">Other</option>
        </select>

        <input type='text' id="other" class="hidden" />

        <select name="cat2" size="1">
            <option selected disabled>Sub-category</option>
        </select>

        <input type="button" name="Search" value="Search" onClick="go()" /        
    </form>

这是我的 JavaScript:

$('#cat').change(function(){
var selected_item = $(this).val()

if(selected_item == "other"){
    $('#other').val("").removeClass('hidden');
}else{
    $('#other').val(selected_item).addClass('hidden');
}
});

var groups=document.search.cat.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=0

group[1][0]=new Option("Moodle")
group[1][1]=new Option("Ultranet")
group[1][2]=new Option("Private School")

group[2][0]=new Option("Gmail")
group[2][1]=new Option("Windows Live")
group[2][2]=new Option("Office 365")

group[3][0]=0 //has no second dropdown option, how do I make it disappear?

group[4][0]=new Option("Kamar")
group[4][1]=new Option("Musac")

group[5][0]=new Option("Windows")
group[5][1]=new Option("Mac")
group[5][2]=new Option("Novell")
group[5][3]=new Option("Linux")

group[6][0]=new Option("Ruckus Wireless")
group[6][1]=new Option("Aerohive Networks")
group[6][2]=new Option("Aruba Networks")

group[7][0]=new Option("Pre-Trial")
group[7][1]=new Option("Implementation")
group[7][2]=new Option("Full Trial")

group[8][0]=0 //The 'others', I don't know what to put here to make this disappear

var temp=document.search.cat2

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}

function go(){
location=temp.options[temp.selectedIndex].value
}

Answer 1

您需要向 .change 函数添加 2 行新行，来自:

$('#cat').change(function(){
var selected_item = $(this).val()

if(selected_item == "other"){
    $('#other').val("").removeClass('hidden');
}else{
    $('#other').val(selected_item).addClass('hidden');
}
});

更改为

$('#cat').change(function(){
var selected_item = $(this).val()

if(selected_item == "other"){
    $('#other').val("").removeClass('hidden');
    $("select[name=cat2]").addClass('hidden');
}else{
    $('#other').val(selected_item).addClass('hidden');
    $("select[name=cat2]").removeClass('hidden');
}
});

因此，当您从输入中删除隐藏类时，您必须将其添加到名称为“cat2”的选择中，反之亦然。希望这对您有帮助。