动态将值绑定到jQuery multiselct控件显示单选按钮

Question

I am getting response form Api and I am dynamically creating SELECT control with options.

This is my HTML

         <select id="resourceviewstop"></select>

I am looping response in Javascript as below

         $.each(response, function (index, item) {
             $('<option value="' + item.Id+ '">' + item.Description + '</option>').appendTo('#resourceviewstop');
          });

Normal drop down will be created as shown below.

Now I am trying to apply multiselect to generated drop down options using jQuery multiselect plugin

        $('#resourceviewstop').multiselect({
                 includeSelectAllOption: true
        });

But I see radio buttons instead of check box. How can i get checkbox here?

EDITED

If i hard code OPTIONS then it will come as checkbox :( But I am getting data from Json and can not hard code.

HTML generated, which i grabbed from developer tool

Answer 1

Multiselect has a special way to add new option items.You have to add multiselect('refresh') to render your new options:

Here is how to add a value: ( http://jsfiddle.net/csdtesting/mpy72gyf/ )

var el  = $('#resourceviewstop').multiselect({
         header:false,
         includeSelectAllOption: true
    });
var newItem = $('#newItem');
var opt =  opt = $('<option />');
    $("#add").click(function(){
        var v = newItem.val(), opt = $('<option />', {
            value: v,
            text: v
        });
        opt.appendTo(el);
        el.multiselect('refresh');
    });

So, you have to change the append operation to:

  $.each(response, function (index, item) {
    var opt = $('<option />', {
                value: item.Id,
                text: item.Description 
            });
            opt.appendTo(el);
            el.multiselect('refresh');
          });

Hope this helps!

Revisioned solution asked vol.1: http://jsfiddle.net/csdtesting/mpy72gyf/1/

vol2 http://jsfiddle.net/mpy72gyf/2/