how can select from drop down menu and call javascript function

Question

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

Answer 1

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

---

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.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 version - same select with 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();    });  }); 

Answer 2

Greetings if i get you right you need a JavaScript function that doing it

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

Regards