bind json data to input select

Question

I am using one input select where i have to bind json data to this control.

Below is the input select used:

<select id="ms" multiple="multiple" name="selector">
                            
</select>

Below is jquery used for bind data on page load:

$(document).ready(function () {
        
        $('#ms').multipleSelect({
            width: '100%'
        });
        BindCategory();
  });
   function BindCategory()
    {
        $.ajax({
            url: "/Article/BindCategory",
            type: "GET",
            contentType: 'application/json; charset=utf-8',
            success: function (response) {
                var sel = $('#ms');
                $.each(response.Categories, function (i, value) {
                    j=1;
                    sel.append('<option value="' + value + '">' + i + '</option>');

                    j++;
                });
            },
            error: function (er) {
                alert(er);
            }
        });
    }

in this bindcategory function i am running one loop to get value one by one and putting in html select control but after complete this process data is not binding in this control.

I added now screen shot of response for your reference in below:

please debug your success function first and see if you have got the right response object back — Simon
– Simon, Commented Apr 1, 2017 at 7:06
Hi, I debugged it and i know i am getting the correct data. for your reference i edited my question above and added now the screen shot of response data. — Prity Kumari
– Prity Kumari, Commented Apr 1, 2017 at 7:11

Nishanth Matha · Accepted Answer · 2017-04-01 07:41:19Z

1

I assume you're using https://github.com/wenzhixin/multiple-select multiselect plugin. If so, In the documentation it specifies to use refresh to reload the select if it dynamically fetches the data.

If you’re dynamically adding/removing option tags on the original select via AJAX or DOM manipulation methods, call refresh to reflect the changes.

Try placing $(elm).multipleSelect('refresh'); in your success function. Something like:

 success: function (response) {
            var sel = $('#ms');
            $.each(response.Categories, function (i, value) {
                j=1;
                sel.append('<option value="' + value + '">' + i + '</option>');

                j++;
            });
            sel.multipleSelect('refresh');
        },

answered Apr 1, 2017 at 7:41

Nishanth Matha

6,0892 gold badges22 silver badges29 bronze badges

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

2 Comments

Prity Kumari Over a year ago

Hey Nishanth, What a stick reply. Thanks dude your solution works for me. I am marking it as answer.

Nishanth Matha Over a year ago

Np..happy coding!

Alok · Accepted Answer · 2017-04-01 07:55:06Z

Here is working code,

<select id="ms" multiple="multiple" name="selector"></select>

Below is the modified JS code.

function BindCategory(){
    $.ajax({
        url: "https://restcountries.eu/rest/v2/all",
        type: "GET",
        success: function (response) {
            var sel = $('#ms');
            $.each(response, function (i, value) {
                sel.append('<option value="' + value.name + '">' + value.name + '</option>');
            });
            sel.multipleSelect('refresh');
        },
        error: function (er) {
            console.log(er);
        }
    });
}

$(document).ready(function () {
    $('#ms').multipleSelect({
        width: '100%'
    });

    BindCategory();
});

Just change the ajax url to your url and sel.append('<option value="' + value.name + '">' + value.name + '</option>'); and this part of code as per your need. Let me know if its works for you. Below is the working fiddle if you want to test it. Working fiddle. try it

Collectives™ on Stack Overflow

bind json data to input select

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related