Javascript 如何从下拉菜单中选择并调用javascript函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5323375/
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
how can select from drop down menu and call javascript function
提问by sadi
I have a drop down which has many options. I want that when I select any option then it calls a function through JavaScript.
我有一个下拉菜单，有很多选项。我希望当我选择任何选项时，它会通过 JavaScript 调用一个函数。
the code which I used is here
我使用的代码在这里
<select name="aa" onchange="report(this.value)"> <--- this is function in .js
<option value="daily">daily</option>
<option value="monthly">monthly</option>
</select>
I want when I select daily then function(daily) is invoked and vice versa.
我希望当我选择每天然后函数（每天）被调用，反之亦然。
function report(daily)<-- js function {
loadXMLDoc('script/d_report.php','responseTag');
document.getElementById('responseTag').style.visibility='visible';
document.getElementById('list_report').style.visibility='hidden';
document.getElementById('formTag').style.visibility='hidden';
}
function report(monthly) {
document.getElementById('responseTag').style.visibility='visible';
loadXMLDoc('script/m_report.php','responseTag');
document.getElementById('list_report').style.visibility='hidden';
document.getElementById('formTag').style.visibility='hidden';
}
回答by mplungjan
<select name="aa" onchange="report(this.value)">
<option value="">Please select</option>
<option value="daily">daily</option>
<option value="monthly">monthly</option>
</select>
using
使用
function report(period) {
if (period=="") return; // please select - possibly you want something else here
var report = "script/"+((period == "daily")?"d":"m")+"_report.php";
loadXMLDoc(report,'responseTag');
document.getElementById('responseTag').style.visibility='visible';
document.getElementById('list_report').style.visibility='hidden';
document.getElementById('formTag').style.visibility='hidden';
}
Unobtrusive version:
不显眼的版本：
<select id="aa" name="aa">
<option value="">Please select</option>
<option value="daily">daily</option>
<option value="monthly">monthly</option>
</select>
using
使用
window.onload=function() {
document.getElementById("aa").onchange=function() {
var period = this.value;
if (period=="") return; // please select - possibly you want something else here
var report = "script/"+((period == "daily")?"d":"m")+"_report.php";
loadXMLDoc(report,'responseTag');
document.getElementById('responseTag').style.visibility='visible';
document.getElementById('list_report').style.visibility='hidden';
document.getElementById('formTag').style.visibility='hidden';
}
}
jQuery version - same select with ID
jQuery 版本 - 与 ID 相同的选择
$(function() {
$("#aa").on("change",function() {
var period = this.value;
if (period=="") return; // please select - possibly you want something else here
var report = "script/"+((period == "daily")?"d":"m")+"_report.php";
loadXMLDoc(report,'responseTag');
$('#responseTag').show();
$('#list_report').hide();
$('#formTag').hide();
});
});
回答by Marwan
Greetings if i get you right you need a JavaScript function that doing it
问候，如果我说对了，你需要一个 JavaScript 函数来做这件事
function report(v) {
//To Do
switch(v) {
case "daily":
//Do something
break;
case "monthly":
//Do somthing
break;
}
}
Regards
问候
回答by x2.
<script type="text/javascript">
function report(func)
{
func();
}
function daily()
{
alert('daily');
}
function monthly()
{
alert('monthly');
}
</script>
