source of json in Multiselect jQuery

Question

I have a multiselect of jQuery and I want to get the source from json. I took the source code from my autocomplete combobox that works, but here it does not work.

My code:

 $(document).ready(function () {
        var warning = $("#message");
        $("select").multiselect({
            //selectedText: function (numChecked, numTotal, checkedItems) {
            //    return numChecked + ' of ' + numTotal + ' checked';
            //},
            source: function (request, response) {
                $.getJSON('http://' + $("[id$='ip']").val() + "/JSON/Auctocomplete.aspx?city=1&term=" + request.term, function (data) { response(data); });
            },
            select: function (event, ui) {
                $("#mfr").textContent = ui.item.id;
            },
            selectedList: 5,
            header: "choose up to 5",
            click: function (e) {
                if ($(this).multiselect("widget").find("input:checked").length > 5) {
                    warning.addClass("error").removeClass("success").html("choose up to 5");
                    return false;
                } else {
                    warning.addClass("success").removeClass("error").html("");
                }
            }
        });
    });

Answer 1

this is because of the Same origin policy. you cannot use ajax to call external sites. if you really want to use, you have to use JSONP. Or you can use serverside proxy for this. means, call external site in the server side and do ajax call to the that webservice.

for more information please refer this link

Answer 2

I searched, and I think there is not a source property for Jquery multiselect. Take a look at http://www.erichynds.com/blog/jquery-ui-multiselect-widget . Are you sure there is a source property for it?

I advice you, first load select from json, then convert it to multiselect.

// The empty select element:
<select></select>

// In javascript:
$(document).ready(function () {
     var url = 'http://...';

     $.getJSON(url,function(result){
               $.each(result, function(i, field){
                      var option = $('<option value="' + field.value + '">' + field.text + '</option>');
                      $('select').append(option);
               });

               $('select').multiselect({...});
     });
});