Retrieving the Text of the Selected ≪Option≫ in ≪Select≫ Element

How to get text of a selected option from the select element?

This works:

<select name="foo" id="foo">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
<input type="button" id="button" value="Button" />

$('#button').click(function() {
    alert($('#foo option:selected').text());
});

Try it yourself: http://jsfiddle.net/Nyenh/

Even simpler:

$('#foo').change(function(){
    var selected = $(this).find('option:selected');
    alert(selected.val() + ' ' + selected.text());
});

http://jsfiddle.net/qtRhQ/1/

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>

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

How get option text from select?

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

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>

Get selected option's text in an HTML select using jQuery

You cannot use selector like this:

$('.productOptionViewSelect option:eq(1)')

because in this result set only one of those options will have index 1 - the index of the second option in second .productOptionViewSelect div will get the index equal to the index of the last option in first div plus 2.

Therefore yo should iterate over those 2 sets of options and use .text():

$('.productOptionViewSelect').each(function(){
    console.log($(this).find('option:eq(1)').text());
});

Output:

Frame Size
Photo Size

How to get the text of a selected item in a select control?

I don't think Prototype has any shortcut that does that for you, so:

var box = $('serverDropList');
var text = box.selectedIndex >= 0 ? box.options[box.selectedIndex].innerHTML : undefined;

...gives you the innerHTML of the selected option, or undefined if there is none.

If you like, you can use Element#addMethods to define this once and have it available on all of your select boxes:

Element.addMethods("SELECT", (function() {
    function getSelectedOptionHTML(element) {
        if (!(element = $(element))) return;
        var index = element.selectedIndex;
        return index >= 0 ? element.options[index].innerHTML : undefined;
    }

    return {
        getSelectedOptionHTML: getSelectedOptionHTML
    };
})());

Usage:

var text = $('serverDropList').getSelectedOptionHTML();

I used a named function when defining that. If you're not bothered about named functions (I am, I always use them), you can make it a bit simpler:

Element.addMethods("SELECT", {
    getSelectedOptionHTML: function(element) {
        if (!(element = $(element))) return;
        var index = element.selectedIndex;
        return index >= 0 ? element.options[index].innerHTML : undefined;
    }
);

Get selected option from select element

Here's a short version:

$('#ddlCodes').change(function() {
  $('#txtEntry2').text($(this).find(":selected").text());
});

karim79 made a good catch, judging by your element name txtEntry2 may be a textbox, if it's any kind of input, you'll need to use .val() instead or .text() like this:

  $('#txtEntry2').val($(this).find(":selected").text());

For the "what's wrong?" part of the question: .text() doesn't take a selector, it takes text you want it set to, or nothing to return the text already there. So you need to fetch the text you want, then put it in the .text(string) method on the object you want to set, like I have above.