Question

假设我想创建一个双下拉选择选项，其中第二个下拉列表根据选择的第一个下拉选项而变化。我已经知道如何做到这一点。但我的第一个下降选项之一是＆＃34;其他＆＃34;如果我选择＆＃34;其他＆＃34;我想要一个输入文本框出现在第一个下拉列表中，而不是第二个下拉选项列表。到目前为止，我已经能够显示输入文本框，但第二个下拉选项列表也会出现（未定义）。如何使第二个下拉选项列表消失？此外，如果第一个下拉列表中的某个选项不需要或没有第二个下拉选项列表，我该如何编写代码？

这是我的脚本示例（我只更改了类别的名称）：

    <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”的选择中，反之亦然。希望这会对你有所帮助。

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

1 个答案: