2008

Javascript Select - jump to url

Posted By : Shaun McCran
Related Categories: Javascript

This is a pretty simple javascript function that I use quite a lot. I normally end out saving the code into a code snippets directory somewhere, but keep loosing it, so I'm adding it here.

view plain print about

1<form name="thisForm">
2<select name="jumpyBox"
3 OnChange="location.href=thisForm.jumpyBox.options[selectedIndex].value">
4 <option selected>Please Select...
5 <option value="http://www.google.com/">google</option>
6 <option value="http://www.yahoo.com/">yahoo.com</option>
7 <option value="http://www.about.co.uk/">ebay.co.uk</option>
8</select>
9</form>

There is an onchange event on the select box that watches for the option changing. When it does we are using [formname.fieldname.option] to get the selected value, and place that inside a JavaScript function. In this case a url redirect.

Obviously you can change the JS function to whatever you want(alert,confirm etc...)

One point to note is that the DOM gets confused if yu use this inside a cfml output or loop, as each element must be unique.

My solution was to generate the form name:

view plain print about

1<cfloop>
2
3<cfset variables.formName = 0>
4
5<form name="formNo#variables.formName#">
6content....
7</form>
8
9<cfset variables.formName = variables.formName + 1>
10</cfloop>

That way your DOM reference is different each time.