我试图用jQuery在选择下拉框中更改选择的选项。我对其进行了设置,以便它在URL的末尾找到哈希标签,并根据该哈希标签更改选择框中的所选选项。

我的大部分代码都具有功能,它可以成功找到哈希标记并执行与其对应的if语句。但是,当转到选项的选择器时(执行基于选项标签的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 hash标记结尾的网址时,不会发生所需的操作,该操作会通过使用“selected” html属性将“PHP Coding”选项更改为所选选项。特定选项标签的选择器返回null。我的语法有问题吗?还是我的代码没有按照我认为的方式运行?非常感谢。

最佳答案

您可以精简它并同时解决选择器问题,只需使用 .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> .val()上设置值(通过ID查找),该方法选择与您传入的值匹配的<option>,这也解决了转义问题。但是,我不确定您拥有的值是实际的value=""部分,它们看起来像<option>的文本...请确保您使用的是value=""部分。另一个优化是,它使用对象映射使维护起来更容易:)

10-05 20:41
查看更多