Convert HTML JavaScript link to form component

I've got a form using JavaScript that works fine, but instead of listing out HTML links, I want the links to appear in a dropdown menu.  I'm nearly there but keep getting the syntax wrong.

How would I convert this:
<a href="javascript:changer('Arizona')">Arizona</a>

to a form component?
Something like...
<select name="state">
<option value="javascript:changer('Arizona')">Arizona</select>
</select>
freezillaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
te-eduCommented:
As I see you need just Javascript to work. onchange you call JS function changer()

Two ways:
<select name="state">
<option value="onchange(changer('Arizona'))">Arizona</select>
</select>

Open in new window

or
<select name="state">
<option value="onchange(changer(this))">Arizona</select>
</select>

Open in new window

Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

freezillaAuthor Commented:
te-edu's are what I'm looking for, though I tried both of his formats and neither seem to work.  Basically these functional links run the script "changer" so when I hover over them, it reads:

Run script "changer('Arizona')"

Also I think the </select> tag should be </option> unless I'm totally mistaken.
freezillaAuthor Commented:
Basically this code below works when I click on a state, the respective cities show up (so if I click on Arkansas I get Little Rock, Conway, Benton, etc.)

<a href="javascript:changer('Arkansas')">Arkansas</a> | 
<a href="javascript:changer('California')">California</a> | 
<a href="javascript:changer('Florida')">Florida</a> | 
<a href="javascript:changer('New York')">New York</a>

But I want it in a drop down menu and not listed out as hyperlinks.

The name of the form is "theForm" and the name of the select is "theState", but for some reason I can't get it to function properly.  Any ideas?

<select name="theState" OnChange="javascript:changer(theForm.theState.options[selectedIndex].value)">
     <option selected>Please Select a State</option>
     <option value="javascript:changer('Florida')">Florida</option>
</select>

This can't be too difficult.  This works as an HTML link, I just need it to function inside a dropdown menu as opposed to a text link.
te-eduCommented:
My mistake

<select name="state" onchange(changer(this)) >
<option value="Arizona">Arizona</select>
</select>

Open in new window


Javascript

function changer(el){
alert(el);
}

Open in new window

freezillaAuthor Commented:
Ok, this still isn't working.  Here's my code...

<script type="text/javascript" src="dynamicDropDown.js"></script>
<script type="text/javascript">
function changer(el){
alert(el);
}
</script>

<select name="theState" onchange(changer(this)) >
<option value="">--Select a State--</option>
<option value="Florida">Florida</option>
<option value="California">California</option>
</select>
te-eduCommented:
Working code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function changer(selectObj){
	 var idx = selectObj.selectedIndex; 
 // get the value of the selected option 
 var which = selectObj.options[idx].value; 

alert(which);
}


</script>
</head>

<body>

<select name="state"  onchange="changer(this)">
<option value="Arizona" >Arizona</option>
<option value="California">California</option>

</select>



</body>
</html>

Open in new window



or this both working
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function changer(selectObj){

alert(selectObj);
}


</script>
</head>

<body>

<select name="state"  onchange="changer(this.options[selectedIndex].value)">
<option value="Arizona" >Arizona</option>
<option value="California">California</option>

</select>



</body>
</html>

Open in new window


te-eduCommented:
you need to change just this piece of code nothing to touch in Javascript.

<select name="state"  onchange="changer(this.options[selectedIndex].value)">
<option value="Arizona" >Arizona</option>
<option value="California">California</option>

</select>

Open in new window


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
freezillaAuthor Commented:
YES!  I knew it wasn't that hard, but was stumped.  Thank you!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.