Get Selected Option Text With JavaScript

Get selected option text with JavaScript

Try options

function myNewFunction(sel) {  alert(sel.options[sel.selectedIndex].text);}

<select id="box1" onChange="myNewFunction(this);">  <option value="98">dog</option>  <option value="7122">cat</option>  <option value="142">bird</option></select>

How get option text from select?

var sel = document.getElementById("51");
var text= sel.options[sel.selectedIndex].text;

Retrieving the text of the selected option in select element

function getSelectedText(elementId) {
    var elt = document.getElementById(elementId);

    if (elt.selectedIndex == -1)
        return null;

    return elt.options[elt.selectedIndex].text;
}

var text = getSelectedText('test');

Getting an option text/value with JavaScript

You can use:

var option_user_selection = element.options[ element.selectedIndex ].text

How to get selected text from select tag using event listener?

Try:

e.target.options[e.target.selectedIndex].text

.options property collects all of the <select> <option>s

.selectedIndex property returns the current index number of selected <option>

.text property of course is the text within an <option>TEXT</option>

or here's an easier way:

e.target.selectedOptions[0].text;

.selectedOptions property is .options and .selectedIndex together.

const select_node = document.getElementById('alpha');select_node.addEventListener('change', (e) => {  console.log(e.target.value); // get selected value.  console.log(e.target.options[e.target.selectedIndex].text); // get selected text.  console.log(e.target.selectedOptions[0].text); // get selected text an easier way.}, false);

<select id='alpha'>  <option value='1'>one</option>  <option value='2'>two</option></select>

How to get the text of the selected option using vuejs?

Instead of define the value only as the id, you can bind the selected value with an object with two attributes: value and text.
For example with products:

<div id="app">
   <select v-model="selected">
       <option v-for="product in products" v-bind:value="{ id: product.id, text: product.name }">
         {{ product.name }}
       </option>
   </select>
</div>

Then you can access to the text through the "value":

   <h1>Value:
     {{selected.id}}
   </h1>
   <h1>Text:
     {{selected.text}}
   </h1>

Working example

var app = new Vue({  el: '#app',  data: {   selected: '',    products: [      {id: 1, name: 'A'},      {id: 2, name: 'B'},      {id: 3, name: 'C'}    ]  }})

<div id="app">   <select v-model="selected">       <option v-for="product in products" v-bind:value="{ id: product.id, text: product.name }">{{ product.name }}       </option>   </select>   <h1>Value:   {{selected.id}}   </h1>   <h1>Text:   {{selected.text}}   </h1></div><script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script>

How to get Javascript Select box's selected text

this.options[this.selectedIndex].innerHTML

should provide you with the "displayed" text of the selected item. this.value, like you said, merely provides the value of the value attribute.

Get selected value in dropdown list using JavaScript

Given a select element that looks like this:

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2" selected="selected">test2</option>
  <option value="3">test3</option>
</select>

Running this code:

var e = document.getElementById("ddlViewBy");
var value = e.value;
var text = e.options[e.selectedIndex].text;

Results in:

value == 2
text == "test2"

Interactive example:

var e = document.getElementById("ddlViewBy");
function onChange() {
  var value = e.value;
  var text = e.options[e.selectedIndex].text;
  console.log(value, text);
}
e.onchange = onChange;
onChange();

<form>
  <select id="ddlViewBy">
    <option value="1">test1</option>
    <option value="2" selected="selected">test2</option>
    <option value="3">test3</option>
  </select>
</form>

Get Selected Option Text With JavaScript