Populate multiple dropdowns with data from ajax

Question

I have a form with multiple dropdown

<select id="0" name ="0">
<option value="abc">ABC</option>
<option value="def">DEF</option>
.
.
.
<option value="mno">MNO</option>
</select>
.
.
.
<select id="9" name="9">
<option value="abc">ABC</option>
<option value="def">DEF</option>
. 
.
.
<option value="mno">MNO</option>
</select>

// This is the basic structure of the code

Now I have a ajax call which gives the following json data

{"2":"abc","5":"def","6":"ghi","7":"def","4":"mno"}

I want to populate the dropdown as per the json data

eg for this case the dropdown with id 2 show have the option value as abc selected, the dropdown with od 5 should have its option with value as def selected and so on.

 $.ajax({
        type : 'POST',
        url : ajax_url,
        data : datavar,

        success : function(msg) {

        }
        });

The json data is present in the msg parameter of success.

How should I proceed?

The thing is I need to get the json data in an associative array so that I can loop through it and use jquery selectors to assign the value . But I am stuck with the problem of getting the array from the json data — Rishi
– Rishi, Commented Sep 6, 2013 at 18:57

Brand · Accepted Answer · 2013-09-06 20:09:34Z

1

Or do it like this if you want to keep it all jquery :)

$.ajax({
    type : 'POST',
    url : ajax_url,
    data : datavar,

    success : function(msg) {
      $.each(msg, function(k, v){
         $('#'+k).val(v);
      });
    }
});

This will loop through each of the returned objects properties and use the k (key) to find the select and assign the selected value (v).

And you can also do it like this:

for(var key in msg){
    if(msg.hasOwnProperty(key)){
        $('#'+key).val(msg[key]);
    }
}

You'll just need to make sure you fix the value attributes of your select boxes. Right now they are missing the trailing value="ABC(") ... that will cause problems

edited Sep 6, 2013 at 20:09

answered Sep 6, 2013 at 19:00

Brand

1073 bronze badges

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

3 Comments

Brand Over a year ago

The problem is with your html ... If you look at: <option value="abc>ABC</option> Notice there is no closing " after the value of the option.... Once I fixed that in the test I did, it worked perfectly :)

Rishi Over a year ago

Hi, the code here had a mistake will check both the methods once again on the live task. :) thanx

Rishi Over a year ago

Have to add a line var drop = jQuery.parseJSON( msg );

Rottingham · Accepted Answer · 2013-09-06 18:54:43Z

0

Since you are using AJAX and JQUERY, this is how I would accomplish your feat:

for(var i = 0; i <= msg.length; i+=2) {
    $('#' + msg[i]).val(msg[i+1]);
}

This will take the first item in the JSON data which is the select box ID and set its value to the second piece of JSON data. In affect, its tell the drop box to set SELECTED="SELECTED" on the OPTION that contains that value.

Sorry if this isn't that clear!

answered Sep 6, 2013 at 18:54

Rottingham

2,6341 gold badge15 silver badges14 bronze badges

1 Comment

Rishi Over a year ago

Hi, The above code give the following error on console 'code' Uncaught Error: Syntax error, unrecognized expression: #{ jquery.js?20130426-1:3 m.error jquery.js?20130426-1:3 m.filter jquery.js?20130426-1:3 m jquery.js?20130426-1:3 c.querySelectorAll.m jquery.js?20130426-1:3 f.fn.extend.find jquery.js?20130426-1:3 e.fn.e.init jquery.js?20130426-1:2 $.init js_top_cached.js?20130426-1:22 e jquery.js?20130426-1:2 $.ajax.success upload_file:2495 o jquery.js?20130426-1:2 p.fireWith jquery.js?20130426-1:2 w jquery.js?20130426-1:4 d

Collectives™ on Stack Overflow

Populate multiple dropdowns with data from ajax

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related