Question

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

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

这是我的代码：

$(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哈希标记结尾的网址时，不会发生所需的操作，这会通过使用“选定”将“PHP编码”选项更改为选定的选项但是html属性特定选项标记的选择器返回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]);
});

此方法使用.val()设置<select>（通过它的ID查找）的值，{{3}}选择<option>，其值与您传入的值相匹配，这可以解决转义问题同样。但是，我不确定您拥有的值是实际的value=""部分，它们看起来像是<option>的文字...请确保您使用value=""部分。另一个优化是，它使用对象映射使维护更容易：）

Answer 2

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

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

有关详细信息，请参阅http://api.jquery.com/category/selectors/

Answer 3

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

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

虽然知道如果页面上有多个select，那么会影响所有这些。

Answer 4

为什么不为每个选择选项分配ID？它会使你的代码更整洁

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

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

4 个答案: