Jump to a different location on the same HTML page on dropdown list selection
June 30th, 2009 in Web UI Programming. Add comment
(No Ratings Yet)
Loading ...A pretty straightforward recipe that shows how to jump to different targets on the same page when the selection in the combobox changes.
First off the Html page, where you have the dropdown list and also define the targets
<p> <form> <select name="jumpTo" onchange='OnChange(this.form.jumpTo)'> <option value="#FirstSection">go to first section</option> <option value="#SecondSection">go to second section</option> <option value="#ThirdSection">goto third section</option> </select> </form> </p> <p> <a name="FirstSection" /> blah blah.............. ......................................... ...................................... </p> <p> <a name="SecondSection" /> blah blah.............. ......................................... ...................................... </p> <p> <a name="ThirdSection" /> blah blah.............. ......................................... ...................................... </p>
Then define the Javascript method OnChange() which will be called when your selection changes:
<script type="text/javascript">
function OnChange(dropdown)
{
var myindex = dropdown.selectedIndex
var SelValue = dropdown.options[myindex].value
var baseURL = SelValue;
top.location.href = baseURL;
return true;
}
</script>
That’s it !
