I'm trying to implement a little 'quick search' chained select form on my home page.
I've managed to get my form fucntioning but when i paste it into my store it doesn't work.
Can anyone help? I've pasted the code...
Code:
<script language="JavaScript" type="text/javascript">
function setOptions(chosen, selbox) {
selbox.options.length = 0;
if (chosen == " ") {
selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
setTimeout(setOptions(' ',document.myform.f_size),5);
}
if (chosen == "1") {
selbox.options[selbox.options.length] = new Option('shoes','11');
selbox.options[selbox.options.length] = new Option('sandals','12');
selbox.options[selbox.options.length] = new Option('sweaters','13');
selbox.options[selbox.options.length] = new Option('tees','2069');
selbox.options[selbox.options.length] = new Option('jackets','15');
setTimeout(setOptions('11',document.myform.f_size),5);
}
if (chosen == "2") {
selbox.options[selbox.options.length] = new Option('second choice - option one','21');
selbox.options[selbox.options.length] = new Option('second choice - option two','22');
setTimeout(setOptions('21',document.myform.f_size),5);
}
if (chosen == "3") {
selbox.options[selbox.options.length] = new Option('third choice - option one','31');
selbox.options[selbox.options.length] = new Option('third choice - option two','32');
setTimeout(setOptions('31',document.myform.f_size),5);
}
if (chosen == "11") {
selbox.options[selbox.options.length] = new Option('6','6');
selbox.options[selbox.options.length] = new Option('7','7');
selbox.options[selbox.options.length] = new Option('8','8');
selbox.options[selbox.options.length] = new Option('8.5','8.5');
selbox.options[selbox.options.length] = new Option('9','9');
selbox.options[selbox.options.length] = new Option('9.5','9.5');
selbox.options[selbox.options.length] = new Option('10','10');
selbox.options[selbox.options.length] = new Option('10.5','10.5');
selbox.options[selbox.options.length] = new Option('11','11');
selbox.options[selbox.options.length] = new Option('11.5','11.5');
selbox.options[selbox.options.length] = new Option('12','12');
selbox.options[selbox.options.length] = new Option('13','13')
}
if (chosen == "12") {
selbox.options[selbox.options.length] = new Option('6','6');
selbox.options[selbox.options.length] = new Option('7','7');
selbox.options[selbox.options.length] = new Option('8','8');
selbox.options[selbox.options.length] = new Option('9','9');
selbox.options[selbox.options.length] = new Option('10','10');
selbox.options[selbox.options.length] = new Option('11','11');
selbox.options[selbox.options.length] = new Option('12','12');
selbox.options[selbox.options.length] = new Option('13','13')
}
if (chosen == "13") {
selbox.options[selbox.options.length] = new Option('x-small','xs');
selbox.options[selbox.options.length] = new Option('small','s');
selbox.options[selbox.options.length] = new Option('medium','m');
selbox.options[selbox.options.length] = new Option('large','l');
selbox.options[selbox.options.length] = new Option('x-large','xl');
selbox.options[selbox.options.length] = new Option('xx-large','xxl');
}
if (chosen == "14") {
selbox.options[selbox.options.length] = new Option('x-small','xs');
selbox.options[selbox.options.length] = new Option('small','s');
selbox.options[selbox.options.length] = new Option('medium','m');
selbox.options[selbox.options.length] = new Option('large','l');
selbox.options[selbox.options.length] = new Option('x-large','xl');
selbox.options[selbox.options.length] = new Option('xx-large','xxl');
}
if (chosen == "15") {
selbox.options[selbox.options.length] = new Option('x-small','xs');
selbox.options[selbox.options.length] = new Option('small','s');
selbox.options[selbox.options.length] = new Option('medium','m');
selbox.options[selbox.options.length] = new Option('large','l');
selbox.options[selbox.options.length] = new Option('x-large','xl');
selbox.options[selbox.options.length] = new Option('xx-large','xxl');
}
if (chosen == "21") {
selbox.options[selbox.options.length] = new Option('second choice - option one - sub one','211');
selbox.options[selbox.options.length] = new Option('second choice - option one - sub two','212');
}
if (chosen == "22") {
selbox.options[selbox.options.length] = new Option('second choice - option two - sub one','221');
selbox.options[selbox.options.length] = new Option('second choice - option two - sub two','222');
}
if (chosen == "31") {
selbox.options[selbox.options.length] = new Option('third choice - option one - sub one','311');
selbox.options[selbox.options.length] = new Option('third choice - option one - sub two','312');
}
if (chosen == "32") {
selbox.options[selbox.options.length] = new Option('third choice - option two - sub one','321');
selbox.options[selbox.options.length] = new Option('third choice - option two - sub two','322');
}
}
</script>
<form name="myform" method="get" action="home.php">
<div align="center">
<select onchange="setOptions(document.myform.optone.options[document.myform.optone.selectedIndex].value,document.myform.cat);" size="1" name="optone">
<option selected="selected" value=" "/>Gender</option>
<option value="1">mens</option>
<option value="2">womens</option>
</select>
<select onchange="setOptions(document.myform.cat.options[document.myform.cat.selectedIndex].value,document.myform.f_size);" size="1" name="cat">
<option selected="selected" value=" ">Category</option>
<select size="1" name="f_size">
<option selected="selected" value=" "/>Size</option>
</select>
<input type="button" onclick="alert(document.myform.f_size.options[document.myform.f_size.selectedIndex].value);" value="GO" name="go"/>
</div>
</form>