Get selected option from select element

Question

I am trying to get the selected option from a dropdown and populate another item with that text, as follows. IE is barking up a storm and it doesn\'t work in Firefox:

<

Answer 1

Given this HTML:

<select>
    <option value="0">One</option>
    <option value="1">Two</option>
</select>

Select by description for jQuery v1.6+:

var text1 = 'Two';
$("select option").filter(function() {
    //may want to use $.trim in here
    return $(this).text() == text1; 
}).prop('selected', true);

Answer 2

if you have this already and use jquery this will be your answer:

$($(this)[0].selectedOptions[0]).text()

Answer 3

The above would very well work, but it seems you have missed the jQuery typecast for the dropdown text. Other than that it would be advisable to use .val() to set text for an input text type element. With these changes the code would look like the following:

    $('#txtEntry2').val($('#ddlCodes option:selected').text());

Answer 4

Using the selectedOptions property (HTML5) you can get the selected option(s)

document.getElementbyId("id").selectedOptions; 

With JQuery can be achieved by doing this

$("#id")[0].selectedOptions; 

or

$("#id").prop("selectedOptions");

The property contains an HTMLCollection array similitar to this one selected option

[<option value=​"1">​ABC</option>]

or multiple selections

[<option value=​"1">​ABC</option>, <option value=​"2">​DEF</option> ...]

Answer 5

Here is a shorter version that should also work:

 $('#ddlCodes').change(function() {
      $('#txtEntry2').text(this.val());
    });

Answer 6

Try following code

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