CODEWITHSUNDEEP
javascriptjqueryjson
user813813
user813813

Reputation: 355

How do I set select options using JSON data?

I have an array of select boxes, with a unique id like this.

 <select class="taskcompleted" id="c392018">
 <option value="No">No</option>
 <option value="Yes">Yes</option>
 </select>

I have a JSON in the format

  {"id":"c392018","value":"Yes"}

I am using the following Javascript to set the selected value

   $.getJSON('getstatus.php') //place correct script URL
    .done(function(response) {
        $.each(response, function(key) {
            var SelectObj = response[key];
            console.log(SelectObj['value']);
            jQuery('#' + SelectObj['id']).val(SelectObj['value']).attr('selected', true);
            });
        });

This is not selecting the value of "Yes". How can I do this?

Upvotes: 0

Views: 1088

Answers (2)

oleksandr.kazimirchuk
oleksandr.kazimirchuk

Reputation: 839

Well, you don't really need jQuery here.

var select = document.getElementById(SelectObj.id);
select.value = SelectObj.value;

Upvotes: 1

Robert Wade
Robert Wade

Reputation: 5003

You simply need to use .val() to set the selected option using the value from your object:

So where you have:

jQuery('#' + SelectObj['id']).val(SelectObj['value']).attr('selected', true);

Should be:

jQuery('#' + SelectObj['id']).val(SelectObj['value']);

See the snippet example below:

Also if you really want the selected property on the item, you should use:

.prop("selected", "selected");


var SelectObj = {"id":"c392018","value":"Yes"};
jQuery('#' + SelectObj['id']).val(SelectObj['value']).prop('selected','selected');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="taskcompleted" id="c392018">
   <option value="No">No</option>
   <option value="Yes">Yes</option>
</select>

Upvotes: 1

Related Questions