Setting selected value of Dropdown List where the Options of Dropdown List are appended dynamically using Jquery

Question

Please Help If anyone have solution.

I am using dependency Dropdown, Where on Selection of Dealer's Dropdown Customer's List is binded dynamically with Jquery.

While in Edit mode according to Dealer Value I'm calling a function in Document.Ready that Appends the Customer's list by getting data from Ajax call.

after this function executes I'm setting the selected value from options, but it is showing null/blank. with many solutions tried. I referred to many questions on this site but result is same. am i doing mistake anywhere?

<select id="ddlcustomerlstEdit" name="ddlcustomerlstEdit" class="form-control">
         <option value=""> -select Customer- </option>
</select>

Here is dynamic binding of List in function called within document.ready.

if (data != "Blank") {
      $("#ddlcustomerlstEdit").html("");
           var str = '<option value=""> -Select Customer- </option>';
           for (var i = 0; i < data.length; i++) {
               str += '<option value=' + data[i].CustomerID + '> ' + data[i].CustomerName + '</option>';
           }
                        $("#ddlcustomerlstEdit").append(str);
}

As soon as this function executes i'm setting the selected value.

var customerIdVal = $("#hdnCustomerID").val();
$('#ddlcustomerlstEdit option[value="' + customerIdVal+'"]').attr("selected", "true");
alert($("#ddlcustomerlstEdit").val());

$("#hdnCustomerID") this value is coming within model and the value it contains is present in <option> yet the alert coming is always null or blank.

Edit

Post the array that is inside data. Without that it is difficult to find what is missing. — Ankit Agarwal
– Ankit Agarwal, Commented Jan 2, 2018 at 7:59
you can see the edit and hidded element contains the value user selected previously that is 2 in this case. i'm using that to compare within the option and then accordingly make that option as selected. @AnkitAgarwal — Divya
– Divya, Commented Jan 2, 2018 at 8:04
Check the answer and let me know if i understood you correct or not — Ankit Agarwal
– Ankit Agarwal, Commented Jan 2, 2018 at 8:06
yes you understood correct but the alert i'm getting is blank, and there's no difference in what you did. then where i'm mistaking? — Divya
– Divya, Commented Jan 2, 2018 at 8:14

Pedram · Accepted Answer · 2018-01-02 09:59:57Z

1

This should be working.

$(document).ready(function() {
  var data = [{
    'CustomerID': '2',
    'CustomerName': 'Test55'
  }];
  if (data != "Blank") {
    $("#ddlcustomerlstEdit").html("");
    var str = '<option value=""> -Select Customer- </option>';
    for (var i = 0; i < data.length; i++) {
      str += '<option value=' + data[i].CustomerID + '> ' + data[i].CustomerName + '</option>';
    }
    $("#ddlcustomerlstEdit").append(str);

    var customerIdVal = $("#hdnCustomerID").val();
    $('#ddlcustomerlstEdit option[value="' + customerIdVal + '"]').attr("selected", "true");
    alert($("#ddlcustomerlstEdit").val());
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlcustomerlstEdit" name="ddlcustomerlstEdit" class="form-control">
         <option value=""> -select Customer- </option>
</select>

<input type='hidden' value='2' id='hdnCustomerID' />

edited Jan 2, 2018 at 9:59

Pedram

16.7k10 gold badges47 silver badges73 bronze badges

answered Jan 2, 2018 at 8:06

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Divya Over a year ago

can you please explain what is the difference in your Code and mine? because mine is still returning blank value. @AnkitAgarwal

Ankit Agarwal Over a year ago

Have you included JQuery? add debugger in the code and debug using chrome developer console. That should help you

Ankit Agarwal Over a year ago

Did you find what was the issue?

Divya Over a year ago

The Data you added in array was coming from an ajax call from me. and as i was trying to set the select value immediately after execution of function it was setting that first and then the options were appended as it was asynchronously running in background. I set async to false and then it went in flow as i required.

Ankit Agarwal Over a year ago

great. You can mark it green if it was helpful to you

Collectives™ on Stack Overflow

Setting selected value of Dropdown List where the Options of Dropdown List are appended dynamically using Jquery

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related