1

I have a dropdown where I am filling the content with dynamic data and in the model I am appending my data to the dropdown 

$("#dpp").append($("<option disabled></option>").val(0).html('Select Locations'));

$("#dpp").append($("<option selected='selected'></option>").val(1111).html('All'));
for (var i = 0; i < Location.length; i++) {                           
    $("#dpp").append($("<option></option>").val(data[i].sno).html(data[i].name));

}

I am unable to get the value and text of the selected option by using a change handler.

I tried:

$('#dpp').change(function () {
    var thisvalue = $(this + "option:selected").text();
    alert(thisvalue);
});

and by default on page load All option selected in the dropdown.

How can I get that value or text and show it on the label?

Jerry Stratton
  • 3,287
  • 1
  • 22
  • 30
Shyam Nair
  • 149
  • 10
  • 24
  • 2
    Possible duplicate of [jquery get label value from dropdown](https://stackoverflow.com/questions/3838965/jquery-get-label-value-from-dropdown) – CMartins Aug 18 '17 at 12:33
  • Duplicated question. Please check: https://stackoverflow.com/questions/3838965/jquery-get-label-value-from-dropdown – CMartins Aug 18 '17 at 12:34
  • @CarlosMartins But how can i get the default selected value of dropdown ? suppose after clicking on the page the dropdown loaded and how can i get the default selected value – Shyam Nair Aug 18 '17 at 12:37
  • this is one way: $("#dpp option:selected").val(); – CMartins Aug 18 '17 at 14:26

4 Answers4

1

For change event and document ready:

$(document).ready(function() {
  getSelectData($('#dpp'));
});

$('#dpp').on('change', function() {
  getSelectData($(this));
});

function getSelectData(el) {
  var $option = el.find('option:selected');
  var text = $option.text();
  var val = $option.val();

  alert('option text: ' + text + '; option value ' + val)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="name" id="dpp">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
Dmitry B.
  • 426
  • 4
  • 11
  • it is ok but when we load the page By default the one is selected right so how can we get that value/text with out using onload/load – Shyam Nair Aug 18 '17 at 12:40
1

Use the below code for both purposes (on page load as well as on change event) 

$(document).ready(function() {

   var dppText= $("#dpp option:selected").text(); // to get text on page load


 //to get text on change of drop-down
  $(document).on('change','#dpp',function(){
   var thisvalue = $(this + "option:selected").text();
   alert(thisvalue);
 });

});
Pradeep
  • 74
  • 7
0

You can use this:

$(document).on('change','#dpp',function(){
    var thisvalue = $(this + "option:selected").text();
    alert(thisvalue);
});

This will add change listener to the document level so you will be able to detect the change on dpp.

Ankit Agarwal
  • 30,378
  • 5
  • 37
  • 62
  • it is ok but when we load the page By default the one is selected right so how can we get that value/text with out using onload/load – Shyam Nair Aug 18 '17 at 12:42
0

This will do it:

$("#dpp option:selected").val();
CMartins
  • 3,247
  • 5
  • 38
  • 53