CODEWITHSUNDEEP
jquery
Joyeeta Sinharay
Joyeeta Sinharay

Reputation: 185

how to get the value of option values on select change in jquery

I have a select list in html and I want to get the select values in a textbox. For this I have done the following code:

 <script type="text/javascript">
    $(document).ready(function(){
        $("#myDropdown").change(function () {
        var selectedValue = $(this).val();
        $("#txtBox").val($(this).find("option:selected").attr("value"))
    });
   });
    </script>

<table id="tab1">
    <tr>
        <td>Select Affiliate Source:</td>
        <td>
            <select id="myDropdown">
                <option value="vcom">Vcommission</option>
                <option value="pym">Payoom</option>
                <option value="snpdl">Snapdeal</option>
                <option value="flpkrt">Flipkart</option>
            </select>
            <div><input id="txtBox" type="text"></div>
        </td>
    </tr>
</table>

But while selecting the value in select the textbox is not showing any value.

Upvotes: 1

Views: 1060

Answers (5)

Nishit Maheta
Nishit Maheta

Reputation: 6031

If you use the code below, it should provide the desired result.

To retrieve the value of a select element in jQuery, you only need to call the val() function of the element as shown below. 

$(document).ready(function(){
  $("#myDropdown").change(function () {
     var selectedValue = $(this).val();
      $("#txtBox").val(selectedValue);
  });
})

Source: http://api.jquery.com/val/

Upvotes: 0

Tushar Gupta
Tushar Gupta

Reputation: 15933

  1. you can include your code in the $(document).ready()
  2. You already have the selected value in selectedValue, no need to use find()

$(document).ready(function() {
  $("#myDropdown").change(function() {
    var selectedValue = $(this).val();
    $("#txtBox").val(selectedValue);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
</script>

<table id="tab1">
  <tr>
    <td>Select Affiliate Source:</td>
    <td>
      <select id="myDropdown">
        <option value="vcom">Vcommission</option>
        <option value="pym">Payoom</option>
        <option value="snpdl">Snapdeal</option>
        <option value="flpkrt">Flipkart</option>
      </select>
      <div>
        <input id="txtBox" type="text">
      </div>
    </td>
  </tr>
</table>

Upvotes: 1

Rashmin Javiya
Rashmin Javiya

Reputation: 5222

Script should be execute after the full page load or you can move the script at the end of the page. Try this,

$(document).ready(function(){
  $("#myDropdown").change(function () {
     var selectedValue = $(this).val();
      $("#txtBox").val(selectedValue);
  });
})

Upvotes: 0

Rohan Kumar
Rohan Kumar

Reputation: 40639

Use $.ready(), as your DOM is loaded after your jquery code, so that your element event not applied,

$(function(){
    $("#myDropdown").change(function () {
        $("#txtBox").val(this.value); // sometimes core javascript functionality more easy to use
    });
});

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1075427

You already have the value in selectedValue, no need for the find:

$("#myDropdown").change(function () {
    var selectedValue = $(this).val();
    $("#txtBox").val(selectedValue);
});

Separately, the code as shown in your question will try to access the select element before it exists, and won't attach a change handler to it. I don't know if that's really how your code is arranged, but if so, that's a problem as well. Script code only has access to elements defined before it runs. You need to either move that script tag below the select tag (usually just before the ending </body> tag is best), or use jQuery's ready callback (but only if you don't control where the script tags go).

Here's a complete example, in order:

<table id="tab1">
    <tr>
        <td>Select Affiliate Source:</td>
        <td>
            <select id="myDropdown">
                <option value="vcom">Vcommission</option>
                <option value="pym">Payoom</option>
                <option value="snpdl">Snapdeal</option>
                <option value="flpkrt">Flipkart</option>
            </select>
            <div><input id="txtBox" type="text"></div>
        </td>
    </tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
      $("#myDropdown").change(function () {
        var selectedValue = $(this).val();
        $("#txtBox").val(selectedValue);
    });
</script>

Upvotes: 1

Related Questions