Why Select Option Change Event Can't Have This And Event.target To Get Selected Value?

In select option change event,why can't we get this or event.target to get selected value instead of writing clumsy code like $( 'select option:selected' ) to get selected value ?

Solution 1:

$("select").on('change', function(){
  console.log($(this).val());
  console.log($(this).find('option:selected').attr('data-attribute')); 
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><select><optiondata-attribute="a">1</option><optiondata-attribute="b">2</option><optiondata-attribute="c">3</option><optiondata-attribute="d">4</option></select>

Solution 2:

Pure JavaScript

If you want a pure JavaScript approach, then use the event.target. To quote the official MDN documentation...

The target property of the Event interface is a reference to the object onto which the event was dispatched. (Source: MDN Web Docs: Event.target.)

Since that gives us the element selected, all we then need is the value attribute, and getting the text display would be nothing more than event.target[event.target.selectedIndex].text...

functiongetSelectedValue(event) {
   console.log("Value: " + event.target.value + "; Display: " + event.target[event.target.selectedIndex].text + ".");
}

<selectonchange="getSelectedValue(event)"><optionselecteddisabled>--Pick an Option--</option><optionvalue="blue1">Blueberry</option><optionvalue="rasp2">Raspberry</option><optionvalue="straw3">Strawberry</option></select>

Using the above approach, it would be trivial to update it to add in other attributes of the selection option value, all in pure JavaScript.

jQuery

If you want a jQuery approach, then try using the :selected query term...

$("#selector").on('change', function(){
    console.log("Value: " + $(this).val() + "; Display: " + $(this).find('option:selected').text() + ".");
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><selectid="selector"><optionselecteddisabled>--Pick an Option--</option><optionvalue="blue1">Blueberry</option><optionvalue="rasp2">Raspberry</option><optionvalue="straw3">Strawberry</option></select>

Solution 3:

You can't get the selected value, but of course you can get the element and the event.target.

<select onchange="mySelectOnchange(this, event)"></select>

function mySelectOnchange(elm, e) {
   // **
}

Solution 4:

It exists... take a look at this code for example

var selectElem = document.getElementById('select');

selectElem.addEventListener('change', onSelect_change);

functiononSelect_change(domEvent){
	// get the selected value :var selectedValue = domEvent.target[domEvent.target.selectedIndex].value;
  // you can also do it using domEvent.target.value but the other solution allows you to get every option's property you want console.log("Selected: " + selectedValue);
}

<selectid="select"name="select"><optionvalue="value1">Value 1</option><optionvalue="value2"selected>Value 2</option><optionvalue="value3">Value 3</option></select>

Hope it helps ;)

PS: have a look on http://www.w3schools.com/jsref/prop_select_selectedindex.asp if you want more examples

Solution 5:

The only property that's automatically transferred from the selected option to the <select> element itself is the value, because that's the main purpose of selecting an option from a drop-down menu. Other attributes like data-* are not automatically copied, because it's possible for the <select> to have its own attributes, e.g.

<selectid="x"data-name="select"><optionvalue="1"data-name="option1">1</option><optionvalue="2"data-name="option2">2</option></select>

It wouldn't make sense for $("#x").data("name") to return the name of the selected option instead of the name of the <select>.