CODEWITHSUNDEEP
javascriptjqueryhtmlajax
harish
harish

Reputation: 143

Select box options not getting selected by jquery with ajax response data

I have an update form in which the data is pre-populated by an ajax call. All the data is getting populated well except the select box. Im using jquery to populate data.

My select code:

<div class="test " id="test">                       
<select id="gender2" name="gender2" class="required">
  <!--  <option value="" selected></option>  -->
        <option value="F">Female</option>
        <option value="M">Male</option>
</select>
</div>

Ajax call:

$.ajax({
    type: "POST",
    url: 'fetchData',
    data: {
        'custId': custID,
    },
    success: function (paxUpdateData) {
        var cust = jQuery.parseJSON(paxUpdateData);
        $("#firstName").val(cust.firstName);
        $("#middleName").val(cust.middleName);
        $("#gender2").val(cust.gender);
    },
    error: function (e) {
        alertify.error('Error in retreiving details');
    }
});

I have tried these but none worked:

$('gender2 option[value='+cust.gender+']').attr('selected', 'selected');
$('#gender2 option[value='+cust.gender+']').prop('selected', true);
$("div.test select").val(cust.gender);

Note: im getting data from backed as cust.gender=M for male and cust.gender=F for female.

Upvotes: 0

Views: 1402

Answers (4)

Saurabh Mistry
Saurabh Mistry

Reputation: 13669

See This Demo is working , now u can put your ajax function inside document ready function , and please check in ajax Response console.log() value is same as your select option value.

$(document).ready(function(){
$('#gender2').val("O");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test " id="test">                       
<select id="gender2" name="gender2" class="required">
        <option value="F">Female</option>
        <option value="M">Male</option>
        <option value="O">Other</option>
</select>
</div>

Upvotes: 0

Punam
Punam

Reputation: 11

Try 

$('#gender2').change(function() {var selectvalue =$('#aioConceptName').find(":selected").val(cust.gender);});

Upvotes: 1

Subash
Subash

Reputation: 816

When it comes to select box it requires change() event,

 $.ajax({
       type: "POST",
       url: 'fetchData',
       data: {
         'custId': custID,
       },
       success: function (paxUpdateData) {
          var cust = jQuery.parseJSON(paxUpdateData);
          $("#firstName").val(cust.firstName).trigger('change');
          $("#middleName").val(cust.middleName).trigger('change');
          $("#gender2").val(cust.gender).trigger('change');
      },
      error: function (e) {
         alertify.error('Error in retreiving details');
      }
});

Upvotes: 0

Saurabh
Saurabh

Reputation: 2775

$("#gender2").change(function() {

    //your ajax

});

Try this

Upvotes: 0

Related Questions