从下拉列表中调用 javascript 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14329445/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Calling javascript functions from drop down
提问by Benji
I have this HTML code at the moment:
我现在有这个 HTML 代码：
Theme
<ul id="dropdown">
<li> Choose theme
<ul>
<li id="stylesheet1" > <a href="#"> Default </a></li>
<li id="stylesheet2" > <a href="#"> Theme 1 </a></li>
<li id="stylesheet3" > <a href="#"> Theme 2 </a></li>
<li id="stylesheet4" > <a href="#"> Theme 3 </a></li>
</ul>
</li>
</ul>
And in a separate javascript document I have this code:
在一个单独的 javascript 文档中，我有这个代码：
function initate()
{
document.getElementById("myList").onchange = function() {
var sheet=document.getElementById("myList").value;
if(sheet=="one"){
setActiveStyleSheet("theme1");
}
else if(sheet=="two"){
setActiveStyleSheet("theme2");
}
else if(sheet="three"){
setActiveStyleSheet("theme3");
}
else{
setActiveStyleSheet("default");
}
return false
};
}
window.onload = initate;
Now this works good but instead of the dropdown I'm using above I'd like to use this HTML code instead:
现在这很好用，但我想用这个 HTML 代码代替上面使用的下拉菜单：
Select Theme
<form>
<select id="myList" >
<option id="stylesheet1">Default</option>
<option id="stylesheet2">Theme 1</option>
<option id="stylesheet3">Theme 2</option>
<option id="stylesheet4">Theme 3</option>
</select>
<form>
As before I would like to have my event handlers in my separate javascript document. I've tried to replace my javascript into these kind of functions:
和以前一样，我希望将我的事件处理程序放在我单独的 javascript 文档中。我试图将我的 javascript 替换为这些类型的函数：
document.getElementById("stylesheet1").onchange = function() {
setActiveStyleSheet("default");
return false
};
But it doesn't work. How do you correct call functions this way?
但它不起作用。你如何以这种方式纠正调用函数？
回答by antejan
Demo: http://jsfiddle.net/zYMFa/
演示：http: //jsfiddle.net/zYMFa/
Use values for options and handle change event for select. The value property of select gets value of the selected option, so you can use this.value in change function.
使用选项的值并处理选择的更改事件。select 的 value 属性获取所选选项的值，因此您可以在更改函数中使用 this.value。
<form>
<select id="myList" >
<option value="default">Default</option>
<option value="theme1">Theme 1</option>
<option value="theme2">Theme 2</option>
<option value="theme3">Theme 3</option>
</select>
<form>
document.getElementById("myList").onchange = function() {
setActiveStyleSheet(this.value);
return false
};
回答by Robot Woods
<select id="myList" >
<option id="stylesheet1" value="default">Default</option>
<option id="stylesheet2" value="one">Theme 1</option>
<option id="stylesheet3" value="two">Theme 2</option>
<option id="stylesheet4" value="three">Theme 3</option>
</select>
document.getElementById("myList").onchange = function() {
var sheet=document.getElementById("myList").value;
if(sheet=="one"){
setActiveStyleSheet("theme1");
}
else if(sheet=="two"){
setActiveStyleSheet("theme2");
}
else if(sheet=="three"){
setActiveStyleSheet("theme3");
}
else{
setActiveStyleSheet("default");
}
return false
};
