如何从下拉菜单中选择并调用javascript函数 [英] how can select from drop down menu and call javascript function

问题描述

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

我使用的代码在这里

 < select name =aaonchange =report（this.value）> < ---这是.js中的函数
< option value =daily>每日< / option> 
< option value =monthly>每月< / option> 
< / select> 
  

我希望每天选择函数（每日）时调用
，反之亦然。

 函数报告（每日）<  -  js函数{
 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'; 
} 
函数报告（每月）{
 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'; 
} 
  

解决方案

 < select name =aaonchange =report（this.value）> 
< option value =>请选择< / option> 
< option value =每日>每日< / option> 
< option value =monthly>每月< / option> 
< / select> 
  

使用

  function report（period）{
 if（period ==）return; //请选择 - 可能你想在这里找到其他的东西
 
 var report =script /+（（period ==daily）？d：m）+_ report.php ; 
 loadXMLDoc（报告，'responseTag'）; 
 document.getElementById（'responseTag'）。style.visibility ='visible'; 
 document.getElementById（'list_report'）。style.visibility ='hidden'; 
 document.getElementById（'formTag'）。style.visibility ='hidden'; 
 
  

---

不显眼的版本： p>

 < select id =aaname =aa> 
< option value =>请选择< / option> 
< option value =每日>每日< / option> 
< option value =monthly>每月< / option> 
< / select> 
  

使用

  window.onload = function（）{
 document.getElementById（aa）。onchange = function（）{
 var period = this.value; 
 if（period ==）return; //请选择 - 可能你想在这里找到其他的东西
 
 var report =script /+（（period ==daily）？d：m）+_ report.php ; 
 loadXMLDoc（报告，'responseTag'）; 
 document.getElementById（'responseTag'）。style.visibility ='visible'; 
 document.getElementById（'list_report'）。style.visibility ='hidden'; 
 document.getElementById（'formTag'）。style.visibility ='hidden'; 
 
 
 $ / code $ / pre 
 
 $ hr 
 
 
 jQuery版本 - 与ID相同的选择
  $（function（）{
 $（＃aa）。on （change，function（）{
 var period = this.value; 
 if（period ==）return; //请选择 - 可能您需要其他东西
 
 var report =script /+（（period ==daily）？d：m）+_ report.php; 
 loadXMLDoc（report，'responseTag'）; 
 $（'＃responseTag'）。show（）; 
 $（'＃list_report'）。hide（）; 
 $（'＃formTag'）。hide（）; 
}）; 
}）; 
  
 
I have a drop down which has many options. I want that when I select any
option then it calls a function through 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';
}

解决方案
<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
$(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(); 
  }); 
});


                        
这篇关于如何从下拉菜单中选择并调用javascript函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！