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

Having a input text appear when chosen option in a double drop down select option


在双重下拉选择选项中选择选项时显示输入文本 已获得1个解决方法 2020-08-18 18:08:30 javascript

假设我想创建一个双下拉选择选项,其中第二个下拉列表根据其选择第一个下拉选项而更改.我已经知道怎么做了.但是我的第一个下拉选项之一是 “其他”,如果我在第一个下拉列表中选择 “其他”,而不是第二个下拉选项列表,我希望出现一个输入文本框.到目前为止,我已经能够让输入文本框出现,但第二个下拉选项列表也出现 (未定义).如何使第二个下拉选项列表消失?另外,如果第一个下拉列表中的一个选项不需要或有第二个下拉选项列表,我该如何编码?

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

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

在双重下拉选择选项中选择选项时显示输入文本 方法1

您需要添加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” 的选择中,反之亦然.希望这对你有所帮助.


.htaccess .net .net-core 2d 3d 3d-printing ab-initio abp abstract-syntax-tree actions-on-google actionscript-3 active-directory activemq activemq-artemis acumatica adobe-xd aframe ag-grid agora.io air airflow ajax akka alert alexa algorithm alignment allure amadeus amazon-cloudformation