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

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

say want create double drop downwards select options sec drop downwards list changes according first drop downwards alternative selected. i've figured out how this. 1 of first drop alternative "others" , want input textbox appear if select "others" in first dropdown list instead of having sec drop downwards alternative list. far, i've been able input textbox appear, sec drop downwards alternative list appears (as undefined). how create sec drop downwards alternative list disappear?? also, if 1 of options in first dropdown list doesn't need or have sec drop downwards alternative list, how code this?

this illustration of script (i changed names of categories):

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

this 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) (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 sec dropdown option, how create 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', don't know set here create disappear var temp=document.search.cat2 function redirect(x){ (m=temp.options.length-1;m>0;m--) temp.options[m]=null (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 }

you need add together 2 new lines .change function, from:

$('#cat').change(function(){ var selected_item = $(this).val() if(selected_item == "other"){ $('#other').val("").removeclass('hidden'); }else{ $('#other').val(selected_item).addclass('hidden'); } });

change to

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

so when remove hidden class input have add together select name "cat2", , vice-versa. hope helps you.

javascript html drop-down-menu