How can select from drop down menu and call javascript function

Asked
Active3 hr before
Viewed126 times

4 Answers

select
90%

where is your code? where are the functions? – Awais Qarni Mar 16 '11 at 9:44 , <select name="aa" onchange="report(this.value)"> <option value="daily">daily</option> <option value="monthly">monthly</option> </select> – sadi Mar 16 '11 at 9:47 ,Please be sure to answer the question. Provide details and share your research!,the code which I used is here

<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();
   });
});
load more v
88%

The first solution is to use DOM events to call an event handler. Take the following example code:,You can add options to the drop-down menu by using nested <option> elements. This creates a list for the user to select from.,Retrieving the selected option value can be done using the following code sample:,This defines a drop-down menu with the default option being a placeholder that reads “Pick your greet”. Now, a change must occur if the user wishes to select a greeting.

HTML

<select id="greet">
   <option value="hello">Hello</option>
   <option value="goodbye">Goodbye</option>
   <option value="seeYou">See you...</option>
</select>
load more v
72%

Method 1: Using the value property: The value of the selected element can be found by using the value property on the select element that defines the list. This property returns a String representing the value attribute of the <option> element in the list. If no option selected then nothing will be returned.,Method 2: Using selectedIndex property with the option property: The selectedIndex property returns the index of the currently selected element in the dropdown list. This index starts from 0 and returns -1 if no option is selected.The options property returns the collection of all the option elements in the <select> dropdown list. The elements are sorted according to the source code of the page. The index found before it can be used with this property to get the selected element. This option’s value can be found by using the value property.,How to set the value of a select box element using JavaScript?,How to set the default value for an HTML <select> element?

Syntax:

selectElement.value

Syntax:

selectElement.options[selectElement.selectedIndex].value
load more v
65%

The idea is to bind the change event handler to the select box using the .change(handler) method. Now an alert is displayed whenever an option is selected from the dropdown.,This post will discuss how to get the selected value of dropdown in JavaScript and jQuery onchange event.,In vanilla JavaScript, you can use the onchange property to specify an event handler to receive change events. Now, the onchange event handler is fired whenever a change is made to the select element.,That’s all about getting the selected value of dropdown in JavaScript and Query on change.

1. Using jQuery

The idea is to bind the change event handler to the select box using the .change(handler) method. Now an alert is displayed whenever an option is selected from the dropdown.

.change(handler)
load more v

Other "select-undefined" queries related to "How can select from drop down menu and call javascript function"