Get selected option from select element

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:

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

What am I doing wrong?

Solution 1:

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.

Solution 2:

Try this:

$('#ddlCodes').change(function() {
  var option = this.options[this.selectedIndex];
  $('#txtEntry2').text($(option).text());
});

Solution 3:

Here is a shorter version that should also work:

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

Solution 4:

With less jQuery:

<select name="ddlCodes"
 onchange="$('#txtEntry2').text(this.options[this.selectedIndex].value);">

this.options[this.selectedIndex].value is plain JavaScript.

(Source: German SelfHTML)