我试图用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=""
部分。另一个优化是,它使用对象映射使维护起来更容易:)