Bind a dropdown list and set a default value in jQuery

Anilananda Chakrabortty

7y9k

HI i'm facing a problem i want to bind the data to dropdown in document.ready function then i want to set a value to the dropdown to highlite the selected value.

Data is binding but im not able to set a value as a selected value.

here is my code...

$(document).ready(function () {

fillDropdown();

$('#sel').val('005');// I want to set here this way

});

function fillDropdown()

{

var url = "sample.json";

$.getJSON(url, function (data) {

$.each(data, function (index, value) {

// APPEND OR INSERT DATA TO SELECT ELEMENT.

$('#sel').append('');

});

//$('#sel').val('005'); /// I dnt want to set here

});

}

Here is the link for example :

https://plnkr.co/edit/ndDtRL?p=preview

Thanks

6 Replies

Know the answer? Post it — somebody with the same question will find it here.

Suraj Kumar7y ago
Accepted answer
Due to asynchronous call both code run at the same time i.e., loading values and setting the default value. So, you need to make sure you code will not run asynchronously.

Try the below setup and it will work and I have already checked it.
$(document).ready(function () {
    $.ajaxSetup({
        async: false
    });

     fillDropdown();
     $('#sel').val('005');
  });
Anilananda Chakrabortty7y ago
@Jignesh Kumar

Problem will come when we will bind the data from others source file and after bind i need to set an value ... there problem will come ...

in this linke https://www.mkyong.com/jquery/how-to-set-a-dropdown-box-value-in-jquery/

they have given example where already dropdown bind and in button click they are setting the value ...

But my requirment is different ...

In documnet.ready function
i want to complet two task ...

1. I want to fill the data from others source file
2. Then i want to set a value.

where i have created a function which will fill the data and after function calling i want to set a value.

please see this link where i'm facing this problem...

https://plnkr.co/edit/ndDtRL?p=preview

Thanks
Jignesh Kumar7y ago
Hello,

Please find below link,
https://www.mkyong.com/jquery/how-to-set-a-dropdown-box-value-in-jquery/
Anilananda Chakrabortty7y ago
I can not set the value during append ...

i have to set the value after dropdown loaded...

somthing like this

$(document).ready(function () {
fillDropdown();
$('#sel').val('005');// I want to set here this way
});
Suraj Kumar7y ago
Try this it will work.
function fillDropdown()
    {
         var url = "sample.json";

            $.getJSON(url, function (data) {
                $.each(data, function (index, value) {
                    // APPEND OR INSERT DATA TO SELECT ELEMENT.
                    $('#sel').append(' + value.ID + '">' + value.Name + '');
                    $('#sel').val('005'); // Set the default values here.
                });

            });
    }
Gajendra Jangid7y ago
Hello dear, Please have a look at below link https://forum.jquery.com/topic/set-default-value-to-dropdownlist-when-form-is-loaded