Блог

Допустим, я хочу создать двойной выпадающий список выбора опций, в котором второй выпадающий список изменяется в соответствии с тем, в соответствии с которым выбран первый выпадающий вариант. Я уже выяснил, как это сделать. НО одним из моих первых вариантов выбора является «Другие», и я хочу, чтобы текстовое поле ввода отображалось, если я выбираю «другие» в первом выпадающем списке вместо второго выпадающего списка опций. До сих пор мне удавалось отображать текстовое поле ввода, но также появляется второй раскрывающийся список опций (как неопределенный). Как мне сделать так, чтобы второй выпадающий список опций исчез?? Кроме того, если один из параметров в первом выпадающем списке не нуждается или имеет второй выпадающий список опций, как мне это закодировать?

Это пример моего скрипта (я только изменил названия категорий):

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

Вам нужно добавить 2 новые строки в функцию .change, начиная с:

 $('#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», и наоборот. Надеюсь, это вам поможет.