Easy Javascript Drop Down Link Selection

The Javascript

function goToThere(opt){

var path = opt.options[opt.selectedIndex].value;
var url = window.location;
var protocol = url.protocol;
var domain = url.host;
var old_path = url.pathname;

if(path != "default" && path != "" && path != old_path){
if(path.indexOf("http://") != -1 || path.indexOf("https://") != -1)
window.location.href = path;
else
window.location.href = protocol+"//"+domain+"/"+path;
}
}

Let’s go through the code. First, we are passing an attribute opt, which in our HTML we will send the select object. Now we need to set some variables, most of which are only used to rebuild the URL if you pass the function a relative path:

path — This simply gets the text that we store in a value attribute for the selected option. This can be a relative link (/category/tutorials/) or external (http://superprofundo.com/category/tutorials/).
url — this just stores the window.location object in a variable for easy access, which we’ll use to grab different parts of the URL.
protocol — As described above, this would be equivalent to window.location.protocol, which specifies the protocol of the current URL – e.g. http: or https:
domain — this will grab the host name of the site, e.g www.superprofundo.com
old_path — this contains the path name of the current URL (for “site.com/index.html,” the pathname is “/index.html”).

Next, our conditional statement is checking that…
path != “default” … the path is not the default option
path ! = “” … the path is not empty
path ! = old_path … the path is not equal to the page we are currently on.

If all of these conditions are true, we can set up the redirect. The next conditional statement uses indexOf to search for an occurrence of “http://” or “https://” in the path. This function returns the position of the first occurrence of what we’re searching for in a string; it will return -1 if it can’t find it. So, if indexOf returns something other than -1 when searching for either http:// or https:// in path, we can assume that pathis a full URL. If this is the case, use window.location.href to redirect the browser window to the URL specified in path. If path isn’t a full URL, we build the redirect URL using the information we culled from window.location.

The HTML

<select onChange="goToThere(this)">

<option value="default" selected="true">---Choose Destination---</option>

<option value="/categories/tutorials">Tutorials</option>

<option value="http://www.superprofundo.com/categories/editorials/">Editorials</option>

</select>

This part is simple. We make a drop down that runs our Javascript function, goToThere, when the onChange event is activated (which would be when a user changes the selected option). The value attribute in each option specifies the path or URL to which the function will ultimately redirect (except for the default selected option). Now we just need to define our Javascript function in the header.

That’s all you need for a versatile drop down link selector in JavaScript. Of course, feel free to use and modify this example. What better way to learn?

This example

  <script>
    function goToThere(opt){
var path = opt.options[opt.selectedIndex].value;
var url = window.location;
var protocol = url.protocol;
var domain = url.host;
var old_path = url.pathname;


if(path != "default" && path != "" && path != old_path){
if(path.indexOf("http://") != -1 || path.indexOf("https://") != -1)
window.location.href = path;
else
window.location.href = protocol+"//"+domain+"/"+path;
}
}
</script>
<table width="100%" border="1">
  <tr>
    <td class="select">
<form action="#"> 
<div align="center">Categories  
<select onChange="goToThere(this)">         
<option>Select Categorie</option>         
<option value="/mobile/index/category/PHP%20Scripts/1">PHP Scripts</option>         
<option value="/mobile/index/category/JavaScript/2">JavaScript</option>         
<option value="/mobile/index/category/HTML%20script/3">HTML script</option> 
<option value="/mobile/index/category/CSS%20scripts/4">CSS scripts</option>
<option value="/mobile/index/category/WordPress/5">WordPress</option>
<option value="/mobile/index/category/Joomla/6">Joomla</option> 
<option value="/mobile/index/category/Domain_&_Hosting/7">Domain & Hosting</option>
<option value="/mobile/index/category/Web-Design-Software/8">Web Design Software</option>   
</select>  </div> 
</form></td>
  </tr>
</table>