dropdown determines page position

[Jon Dapron]

Hello,
Id like to have a form with 2 drop down menus. The first dropdown would determine the content of the second, i.e. if the first selection was pizza, the second would read pizza hut,imos,dominos,etc. , if it was changed to soda, the second would change to coke,pepsi,sprite,etc. And upon clicking the go button, id like it to go to the appropriate page anchor. Can anyone help me get started with a simple form example that goes to an anchor? Thanks!

[Topher]

Something along the lines of:
<select name='my_select' onChange='document.location="#" + this.value'>
<option value='coke'>Coke</option>
<option value='sprite'>Sprite</option>
</select>
Although that's not tested. If you need help with filling the second select box I will get you some code I've already done when I get home from work.

[Jon Dapron]

thanks for the quick response - i really appreciate it. Ill work on it and post back if i have any questions.

[Jon Dapron]

hi,
i am going to need a bit of help with this. You can check out http://www.ejwelch.com/ejw-completedProjects2.asp to see kind of where im going. The code is wrong, however, i did get it to change the second select box. A big problem is going to be that i have a "View All" option in the second field for all manufacturers. So, it has to be a combination of both fields that determines the appropriate anchor. Id really appreciate any help with this. Thank you very much for your time.

[scoutt]

http://www.snippetlibrary.com/viewhtml.php/5/19/26

[Jon Dapron]

Thanks for the reply,
that is definately a cleaner way of achieving the double select thing. However, i really need help with when a user clicks submit/go button, it has to jump to an anchor in the page based on the value. What makes it tricky is that evey option in the first dropdown will have a 'View All' in the second option box. So simply setting the anchor value to the second dropdown value wont work. Suggestions?

[Topher]

Right, so you're using different <a name> positions in the same page for this? Surely then there's not really a need for view all, I would have thought? Anyway, you could do a function call.

function go_to_position(the_value) {

if (the_value == 'coke') {
document.location = '#coca-cola';
} else if (the_value == 'tango') {
document.location = '#tango';
} else if (the_value == 'all') {
document.location = '#all_products'
}

} // End of function

Then in the body:

<form name='form1'>

<select name='select2'>
<option value='all'>View all</option>
<option value='coca-cola'>Coca-Cola</option>
<option value='tango'>Tango</option>
</select>

<input type='button' value='Go' onClick='go_to_position(document.form1.select2.value)'

</form>

[Jon Dapron]

thank you so much, that was a great help! ill try to get this up today and post back if there are any issues.

[Jon Dapron]

One more problem, how can i set the value of the second dropdown box, which must be different than the visible option in the box. Heres my code so far:

<form name="doublecombo">
<b style="font-family:arial;">Quick Find</b>
<p class="noindent" style="font-family:arial;">
Select a manufacturer and product to view information:
<br><br>
<select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option>Manufacturer 1</option>
<option>Manufacturer 2</option>
</select>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<select name="SelectURL" size="1">
<option value="">View All</option>
<option value="">Product 1</option>
</select>
<input type="button" name="test" value="Go!"
onClick='go_to_position(document.doublecombo.SelectURL.options)'>
</p>

<script>
<!--

var groups=document.doublecombo.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("View All","")
group[0][1]=new Option("Product 1","")

group[1][0]=new Option("View All","")
group[1][1]=new Option("Product 1","")
group[1][2]=new Option("Product 2","")
group[1][3]=new Option("Product 3","")
group[1][4]=new Option("Product 4","")

var temp=document.doublecombo.SelectURL

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_to_position(the_value) {

if (the_value == 'View All Manufacturer 1') {
document.location = '#View All M1';
} else if (the_value == 'Product 1 Manufacturer 1') {
document.location = '#Product 1 M1';
} else if (the_value == 'View All Manufacturer 2') {
document.location = '#View All M2'
}

} // End of function

//-->
</script>

</form>

[Topher]

The value is the second argument in the new Option() statement... So you could have.

document.forms[0].select1[document.forms[0].select.options.length] = new Option('Display text','value');

[Jon Dapron]

thanks for the quick response.
im sorry im not very good at the javascript yet. Where would this go in my code? The new option part of my code looks different than in your response. Thanks!

[Jon Dapron]

i got it, thanks!