选项标记值属性的jQuery选择器返回null

Question

我试图用jQuery更改选择下拉框中的选定选项.我设置它,以便它在URL的末尾找到哈希标记,并根据该哈希标记更改选择框中的选定选项.

我的大部分代码都是有用的,它成功找到了hash标记并执行了与之对应的if语句.但是,当它转到选项的选择器(它使用基于option标签的value属性的属性选择器)时,它执行语句的"then"部分时,它返回null.如果用firebug计算出来,在控制台中它表示选择器为null.

这是我的代码:

$(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")
    }
});

因此,为了澄清,例如,当我输入以#php哈希标记结尾的URL时,不会发生所需的操作,这会通过使用"selected"html属性将"PHP编码"选项更改为选定的选项.特定选项标记的选择器返回null.我的语法是否有问题,或者我的代码是否按照我认为的方式运行？非常感谢.

Answer 1

您可以减少它并同时解决您的选择器问题,只需使用.val()如下:

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]);
});

这种方法设置<select>(通过它的ID找到它)的值.val(),它选择<option>与您传入的值匹配的值,这也解决了转义问题.但是,我不确定你拥有的值是实际value=""部分,它们看起来像<option>...... 的文本.确保你使用的是该value=""部分.另一个优化是,它使用对象映射使这更容易维护:)