How To Get The Display Value Of Select Using Javascript

OneTwoThree I am

Solution 1:

In plain JavaScript you can do this:

constshow = () => {
  const sel = document.getElementById("Example"); // or this if only called onchangelet value = sel.options[sel.selectedIndex].value; // or just sel.valuelet text = sel.options[sel.selectedIndex].text;
  console.log(value, text);
}

window.addEventListener("load", () => { // on load document.getElementById("Example").addEventListener("change",show); // show on changeshow(); // show onload
});

<selectid="Example"><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select>

jQuery:

$(function() { // on loadvar $sel = $("#Example");
  $sel.on("change",function() {
    var value = $(this).val();
    var text = $("option:selected", this).text();
    console.log(value,text)
  }).trigger("change"); // initial call
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><selectid="Example"><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select>

Solution 2:

Here the selected text and value is getting using jquery when page load

$(document).ready(function () {
var ddlText = $("#ddlChar option:selected").text();
var ddlValue = $("#ddlChar option:selected").val();
});

refer this

http://csharpektroncmssql.blogspot.in/2012/03/jquery-how-to-select-dropdown-selected.html

http://praveenbattula.blogspot.in/2009/08/jquery-how-to-set-value-in-drop-down-as.html

Solution 3:

This works well

jQuery('#Example').change(function(){ 
    var value = jQuery('#Example').val(); //it gets you the value of selected option console.log(value); // you can see your sected values in console, Eg 1,2,3
});