Question

I am trying to change the selected option in a select dropdown box with jQuery. I have it set so that it finds the hash tag at the end of the URL and based on that hash tag it changes the selected option in the select box.

Most of my code is functional, it successfully finds the hash tag and executes the if statement that corresponds with it. However, when it goes to execute the “then” section of the statement when it goes to the selector for the option (which uses an attribute selector based on the value attribute of the option tag) it returns null. If figured this out with firebug, in the console it says that the selector is null.

Here is my code:

$(document).ready(function() {
    var $hash = window.location.hash
    if($hash == "#htmlcss") {
    $('option[value="HTML/CSS Coding"]').attr("selected","selected")
    }
    if($hash == "#php") {
    $('option[value="PHP Coding"]').attr("selected","selected")
    }
    if($hash == "#jscript") {
    $('option[value="Javascript and jQuery Coding"]').attr("selected","selected")
    }
    if($hash == "#improv") {
    $('option[value="General Website Improvements"]').attr("selected","selected")
    }
    if($hash == "#towp") {
    $('option[value="Website Conversion to WordPress"]').attr("selected","selected")
    }
    if($hash == "#wptheme") {
    $('option[value="Wordpress Theme Design"]').attr("selected","selected")
    }
    if($hash == "#complete") {
    $('option[value="Complete Website Creation"]').attr("selected","selected")
    }
    if($hash == "#server") {
    $('option[value="Web Server Configuration"]').attr("selected","selected")
    }
});

So to clarify, when I enter in a url that ends in the #php hash tag, for example, the desired action does not occur which would change the “PHP Coding” option to the selected one by using the “selected” html attribute however the selector for the particular option tag returns null. Is there a problem with my syntax or is my code not functioning in the way that I think it should? Thanks very much.

Answer 1

You can slim it down and resolve your selector issue at the same time, just use .val() like this:

var hashmap  = { 
  htmlcss: "HTML/CSS Coding",
  php: "PHP Coding",
  jscript: "Javascript and jQuery Coding",
  improv: "General Website Improvements",
  towp: "Website Conversion to WordPress",
  wptheme: "Wordpress Theme Design",
  complete: "Complete Website Creation",
  server: "Web Server Configuration"
};

$(function() {
    var $hash = window.location.hash.replace('#','');
    $("#IDOfSelectElement").val(hashmap[$hash]);
});

This approach sets the value on the <select> (finding it by it’s ID) using .val(), which selects the <option> with the value matching what you passed in, this resolves escaping issues as well. However, I’m not certain the values you have are the actual value="" portion, they seem like the text of the <option>…make sure you’re using the value="" portion. The other optimization is that this uses an object map to make this much easier to maintain 🙂