Get Selected Value/Text from Select on Change

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>

jQuery get value of select onChange

Try this-

$('select').on('change', function() {  alert( this.value );});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>    <option value="1">One</option>    <option value="2">Two</option></select>

.change() get :selected text value

the line should be

var selectedText = $(this).find("option:selected").text();

Get value of selected drop down list item

Not exactly sure what the problem is but this works for me:

var select = document.getElementById("model");
select.onchange = function(){
    var selectedString = select.options[select.selectedIndex].value;
    alert(selectedString);
}

Demo: http://jsfiddle.net/louisbros/PS4zy/1/

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>

Get selected text from a drop-down list (select box) using jQuery

$("#yourdropdownid option:selected").text();

jQuery Get Selected Option From Dropdown

For dropdown options you probably want something like this:

For selected text

var conceptName = $('#aioConceptName').find(":selected").text();

For selected value

var conceptName = $('#aioConceptName').find(":selected").val();

The reason val() doesn't do the trick is because clicking an option doesn't change the value of the dropdown--it just adds the :selected property to the selected option which is a child of the dropdown.

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>

---

Related Topics