jQuery selector for option tag value attribute returns null

Posted by Ben on Stack Overflow See other posts from Stack Overflow or by Ben
Published on 2010-06-09T00:01:44Z Indexed on 2010/06/09 0:12 UTC
Read the original article Hit count: 249

Hello, 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.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery