"onchange" for dropdown list send to multiple pages

(not just one!)

[ssling]

i'm still a javascript novice, but have found a handy piece of code that will send a user to another page when they select a given option on a dropdown list (see below). the problem is, i can only get it to work for one selection (C in this case). ideally, i would like to have multiple select options on the dropdown, each sending the user to another page when selected (i.e. send to page A when optionA selected, send to pageB when optionB selected etc..).

my eyes are red from googling, trying to find the answer out there, and it occured to me that someone in here would know what to do, just off the top of their head. so can anyone point me the right way?

thanks!

<select name="select" onchange="if(this.options[this.selectedIndex].value=='OptionC') { document.location.href='http://www.mysite/pageC.html'; }">
<option value="optionA">optionA</option>
<option value="optionB">optionB</option>
<option value="optionC">optionC</option>
</select>

[daveVk]

Like this?

<select name="select" onchange="document.location.href=this.options[this.selectedIndex].value;">
<option value="http://www.mysite/pageA.html">optionA</option>
<option value="http://www.mysite/pageB.html">optionB</option>
<option value="http://www.mysite/pageC.html">optionC</option>
</select>

[ssling]

hi daveVk,

thanks alot for your help!

that does kind of answer my question, but now creates another problem... (sorry for poorly worded question in the first place!)

now, the user is sent to another url no matter what selection is made. actually, what i wanted to do was to allow the user to stay on the page (and continue filling in the form) if they selected, say, optionA or optionB; but for the user to be sent to pages C, D or E if optionC, optionD or optionE were selected. kind of a mixed outcome.

is there a way to tweak your code above to achieve that?

[Fotiman]

First, you should consider removing all of that gobbledeegook from your markup. It's behavior, so ideally you should keep it separate. Here's how I'd do it:

<select name="select" id="select"> 
<option value="optionA">optionA</option> 
<option value="optionB">optionB</option> 
<option value="optionC">optionC</option> 
</select> 

Next, add your behavior in a script file, and include it in the head of your document. You'll want to attach the behavior handler once the document has finished loading.

function selectCallback(s) 
{ 
 // This function gets called when selection changes 
 if( s.selectedIndex == -1 ) return; 
 var v = s.options[s.selectedIndex].value; 
 switch(v) { 
 case 'optionA': 
  // Go to page A 
  document.location.href='http://www.example.com/pageA.html'; 
  break; 
 case 'optionB': 
  document.location.href='http://www.example.com/pageB.html'; 
  break; 
 default: 
  // Do nothing for other selections 
  break; 
 } 
} 
function attachBehaviors() 
{ 
 // Attach event handler to your select object 
 var s = document.getElementById("select"); 
 if( s ) 
 { 
 s.onchange = function(){selectCallback(s);}; 
 } 
} 
window.onload = attachBehaviors; 

There are cleaner ways to attach event handlers, using the Yahoo UI Library [developer.yahoo.com]'s Event Utility [developer.yahoo.com] for example. However, this should work.

[edited by: Fotiman at 5:42 pm (utc) on Nov. 27, 2006]

[ssling]

wow. thanks Fotiman!

srry, been travelling just saw this. i'll try it out tonight.

[ssling]

that is totally awesome! exactly what i wanted.

and i like the way you separated the js out from the html; much cleaner. i'll try that with some other code i'm working on.

thanks again Fotiman (and daveVk)!