Member Avatar for motionxcity77

Hello,

I'm a relatively novice at JavaScript and I'm afraid I've ran into a bit of trouble.

I need to create a series of dependent dropdown menus that will redirect to a new page based on the selections in the dropdown box.

I've found some examples of different dependent dropdown menus, but none of the examples contain the ability to redirect based on the selections. Any help would be greatly appreciated!

Thank you.

  • 3 Contributors
  • 2 Replies
  • 119 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by fxm
Member Avatar for Graphix

I assume you are using javascript-based dropdowns?

Well you need to write a function that is called every time the dropdown-box is changed that loads the content of the dropdown depending on the value:

<select name="myDropDown" id="myDropDown" onchange="LoadDropdown(this.value)">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
</select>

<div id="Dropdownmenu">
Subject A<br />
Subject B
</div>

<script type="text/javascript">
function LoadDropdown(value) {
if (value == "0") {
    document.getElementById("Dropdownmenu").innerHTML = "Subject A<br />Subject B";
} else if (value == "1") {
    document.getElementById("Dropdownmenu").innerHTML = "Subject C<br />Subject D";
}
}
</script>

~G

Member Avatar for fxm

redirect based on the selection

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <script type="text/javascript">
	function goSearch(opt) {
	    switch (opt) {
	    case "1":
	        window.location = 'http://www.google.com';
	        break
	    case "2":
	        window.location = 'http://www.bing.com';
	        break
	    }
	}    
    </script>
    <title></title>
  </head>
  <body>
    <select name="searches" id="searches" onchange=
    "goSearch(this.value)">
      <option value="0">
        choose search
      </option>
      <option value="1">
        google
      </option>
      <option value="2">
        bing
      </option>
    </select>
  </body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.