如何从下拉菜单中选择并调用 javascript 函数答案

【问题标题】：how can select from drop down menu and call javascript function如何从下拉菜单中选择并调用 javascript 函数
【发布时间】：2011-07-16 10:53:40
【问题描述】：

我有一个下拉菜单，其中有很多选项。我希望当我选择任何选项然后它通过 JavaScript 调用一个函数。

我使用的代码在这里

<select name="aa" onchange="report(this.value)"> <--- this is function in .js
<option value="daily">daily</option>
<option value="monthly">monthly</option>
</select>

我希望当我选择每天然后调用函数（每天）反之亦然。

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';
}

【问题讨论】：

您的代码在哪里？函数在哪里？
函数报告（每日）

标签： javascript html

【解决方案1】：

<select name="aa" onchange="report(this.value)"> 
  <option value="">Please select</option>
  <option value="daily">daily</option>
  <option value="monthly">monthly</option>
</select>

使用

function report(period) {
  if (period=="") return; // please select - possibly you want something else here

  const 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'; 
}

不显眼的版本：

<select id="aa" name="aa"> 
  <option value="">Please select</option>
  <option value="daily">daily</option>
  <option value="monthly">monthly</option>
</select>

使用

window.addEventListener("load",function() {
  document.getElementById("aa").addEventListener("change",function() {
    const period = this.value;
    if (period=="") return; // please select - possibly you want something else here

    const 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 版本 - 与 ID 相同的选择

$(function() {
  $("#aa").on("change",function() {
    const 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(); 
  }); 
});

【讨论】：

【解决方案2】：

问候如果我猜对了，你需要一个 JavaScript 函数来完成它

function report(v) {
//To Do
  switch(v) {
    case "daily":
      //Do something
      break;
    case "monthly":
      //Do somthing
      break;
    }
  }

问候

【讨论】：

我不明白你的意思是你需要每天输入它，因为枚举不在“每日”中？？

【解决方案3】：

<script type="text/javascript">
function report(func)
{
    func();
}

function daily()
{
    alert('daily');
}

function monthly()
{
    alert('monthly');
}
</script>

【讨论】：

区别在于显示哪个报告。当您只需要一个简单的选择时，为什么还要拥有多种功能