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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select>
  <option data-attribute="a">1</option>
  <option data-attribute="b">2</option>
  <option data-attribute="c">3</option>
  <option data-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...

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

<select onchange="getSelectedValue(event)">
    <option selected disabled>--Pick an Option--</option>
    <option value="blue1">Blueberry</option>
    <option value="rasp2">Raspberry</option>
    <option value="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() + ".");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selector">
        <option selected disabled>--Pick an Option--</option>
        <option value="blue1">Blueberry</option>
        <option value="rasp2">Raspberry</option>
        <option value="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);

function onSelect_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);
}

<select id="select" name="select">
  <option value="value1">Value 1</option> 
  <option value="value2" selected>Value 2</option>
  <option value="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.

<select id="x" data-name="select">
    <option value="1" data-name="option1">1</option>
    <option value="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>.