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

Posted 2023-03-05

【中文标题】选项标签值属性的 jQuery 选择器返回 null

【英文标题】：jQuery selector for option tag value attribute returns null

【发布时间】：2011-03-01 10:37:37

【问题描述】：

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

我的大部分代码都是正常运行的，它成功地找到了哈希标签并执行了与之对应的 if 语句。但是，当它转到选项的选择器（它使用基于选项标签的 value 属性的属性选择器）时执行语句的“then”部分时，它返回 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”将“PHP Coding”选项更改为选定的选项html 属性，但是特定选项标签的选择器返回 null。我的语法有问题还是我的代码没有按照我认为应该的方式运行？非常感谢。

【问题讨论】：

您确定这些是值，而不是 <option> 元素的文本文本吗？另外，<select> 的名称是什么，有一个更简单的方法：)

【参考方案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 查找），它选择与您传入的值匹配的<option>，这也解决了转义问题。但是，我不确定您拥有的值是实际的 value="" 部分，它们看起来像 <option> 的文本...确保您使用的是 value="" 部分。另一个优化是它使用了一个对象映射来使它更容易维护:)

【讨论】：

我打算用一个非常相似的评论来回答......尼克是完全正确的。我还要补充一点，在设置选择框中选择的选项时，使用 .val() 是真正工作的唯一方法。

这非常有效！太感谢了。我从没想过使用这种方法，它更优雅、更紧凑，最重要的是，实用！我想我需要更多地研究 jQuery API。再次感谢尼克！

【参考方案2】：

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

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

欲了解更多信息，请参阅http://api.jquery.com/category/selectors/

【参考方案3】：

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

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

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

【参考方案4】：

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

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