jquery how to get Text from dropdownlist

Question

I got 2 pages.. but I am having difficulty getting the Text value from a dropdownlist and inserting it into a textbox for instance this is Page 1

• A user has 1 options to select on Page 1, the jquery code below is activated with the change function .

• This will Load a new dropdownlist depending on which field they picked.

• This all works Fine but my problem is getting the new value from the newlist into the keyword textbox how can i do that ?

  <select id="pick">
  <option></option>
   <option>Financial</option>
  </select>
  
  <div id="newlist" style="margin-left:180px;">      
  </div>
  
     <input type="text" id="keyword" />
  <script>
      $("#pick").change(function () {
        if ($(this).val() == "Financial")
  {
           $("#newlist").load('/Listings/service #service');
            $("#keyword").text() = $("#service").text();
        }
  
    });
  </script>
  

page2 is where the newlist is

<select name="service" id="service" style="background-color:red;">
<option>automotive</option>
<option>mechanic</option>
</select>

So again the gets the dropdownlist from Page2 but for some reason I can't transfer that value into the textbox any help would be great..

Answer 1

Try using val instead of text.

val

The .val() method is primarily used to get the values of form elements such as input, select and textarea. In the case of elements, the .val() method returns an array containing each selected option; if no option is selected, it returns null.

text

The .text() method cannot be used on form inputs or scripts. To set or get the text value of input or textarea elements, use the .val() method. To get the value of a script element, use the .html() method.

Code:

 $("#pick").change(function () {
     if ($(this).val() == "Financial") {
        $("#keyword").val($("#service").val());
     }
 });

Demo: http://jsfiddle.net/IrvinDominin/TKeE6/

Answer 2

As far as I can see, the last part of code should be executed in the complete event.

  $("#newlist").load('/Listings/service #service',function(){
          $("#keyword").val($("#service").text());
});

Cause #service is not gonna be available until your ajax request has completed.

EDIT: and as @tymeJV correctly said, it should be .val() on the textbox.

Answer 3

Try

$("#keyword").val($("#service").val());