How to pass parameters on onChange of html select

Question

I am a novice at JavaScript and jQuery. I want to show one combobox-A, which is an HTML <select> with its selected id and contents at the other place on onChange().

How can I pass the complete combobox with its select id, and how can I pass other parameters on fire of the onChange event?

Answer 1

function getComboA(selectObject) {
  var value = selectObject.value;  
  console.log(value);
}

<select id="comboA" onchange="getComboA(this)">
  <option value="">Select combo</option>
  <option value="Value1">Text1</option>
  <option value="Value2">Text2</option>
  <option value="Value3">Text3</option>
</select>

The above example gets you the selected value of combo box on OnChange event.

Answer 2

Another approach wich can be handy in some situations, is passing the value of the selected <option /> directly to the function like this:

function myFunction(chosen) {
  console.log(chosen);
}

<select onChange="myFunction(this.options[this.selectedIndex].value)">
  <option value="1">Text 1</option>
  <option value="2">Text 2</option>
</select>