jQuery选择器选取option标签的value属性返回null。

Question

我正在尝试使用jQuery更改下拉选择框中的所选选项。我已经设置它，以便找到URL末尾的哈希标记，并基于该哈希标记更改选择的选项。

我的大部分代码都是功能性的，它成功地找到了哈希标记，并执行与之相对应的if语句。但是，当它执行语句的“then”部分时，当它转到选项的选择器（它使用基于选项标记的value属性的属性选择器）时，它返回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散列标记结尾的网址时，例如，所需操作不会发生，这将使用“selected”html属性将“PHP编码”选项更改为所选选项，但特定选项标签的选择器返回null。我的语法有问题还是我的代码没有按照我认为的方式运行？非常感谢。

- Ben Kulbertis

---

你确定那些是值，而不是<option>元素的文本吗？此外，<select>的名称是什么？有一个更简单的方法来做这件事 :) - Nick Craver

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

这种方法使用.val()，通过找到相应ID的<select>在其中设置值，它会选择与你传入值匹配的<option>，这样可以解决转义问题。然而，我不确定你拥有的值是否是实际的value=""部分，它们似乎是<option>的文本...确保使用value=""部分。另一个优化是使用对象映射来使代码更易于维护 :)

- Nick Craver

---

我本来也想回复一个非常类似的评论...Nick说得完全正确。我还要补充一点，就是在设置选择框中选定哪个选项时，使用.val()是唯一实际有效的方法。 - Dan McDougall

这个方法非常好用！非常感谢你。我从来没有想过使用这种方法，它更加优雅、紧凑，最重要的是，功能强大！我想我需要更多地学习jQuery API。再次感谢Nick！ - Ben Kulbertis

Answer 2

在值选择器中不应使用引号，而且我认为您可能需要转义斜杠，即：

$('option[value=HTML\\/CSS Coding]').attr("selected","selected")

更多信息，请参见http://api.jquery.com/category/selectors/

- azatoth

Answer 3

可能只需在您的if语句之前添加此代码：

$('option').removeAttr('selected');

尽管如此，请注意如果页面上有多个select，则这会影响所有select。

- artlung

Answer 4

为什么不为每个选择选项分配ID？这将使您的代码更整洁。

$(document).ready(function() {
   $(window.location.hash).attr("selected","selected");
});

- Nazariy