How can I programatically set the values of the jQuery dropdown-check-list?

How can I programatically set some checkboxes to selected?

The scenario is as follows: Once I create a user through the admin screen I have a couple of jqueryDropdown checkboxes one for "User Roles" and one for "User Regions" since a user can have many roles and many regions associated with him/her. No problem there I got that accomplished and saved to the database. I also give the user the ability to update the user roles and regions and I want to do it through the jQuery dropdown-check-list so my approach is as follows:

1. Give them the same screen they used to create the user
2. Issue an Ajax request to get the user specific roles and regions.
3. Now what I want to do is based on the Ajax response set to checked the checkboxes that match t开发者_如何学Che value of the response through DOM Scripting. Does anybody know how to do that?

I have found the answer to my own problem. First I want to mention that I wanted to populate this jquery component http://dropdown-check-list.googlecode.com/svn/trunk/doc/dropdownchecklist.html sorry if my original question was missleading.

The Javascript to populate my jquery drop down checklist plugin is as follows:

$(document).ready(function() {

    //These will apply the jquery drop down checklist to both of selects
    $(".s1").dropdownchecklist({ width: 205});
    $( "button, input:button", null).button();
    loadUserRoles();
    loadUserRegions();
});


function loadUserRoles(){

    var userName = $("#userName").val();
    var hostname = getHostName();
var requestURL = hostname.concat("fos", "/users/userRoles?userName="+userName);

    $.getJSON(requestURL, null, function(data){
        var userRoles = new Array();

        $.each(data.list, function(i,item){
            userRoles.push(item.id.toString());
        });

        $("#role").dropdownchecklist("destroy");
        $("#role").val(userRoles);
        $("#role").dropdownchecklist();
        //$("#role").dropdownchecklist("refresh");
});
}

function loadUserRegions(){

    var userName = $("#userName").val();
    var hostname = getHostName();
var requestURL = hostname.concat("fos", "/users/userRegions?userName="+userName);

    $.getJSON(requestURL, null, function(data){
        var userRegions = new Array();

        $.each(data.list, function(i,item){
            userRegions.push(item.id.toString());
        });

         $("#region").dropdownchecklist("destroy");
         $("#region").val(userRegions);
         $("#region").dropdownchecklist();
});
}

function getHostName(){

var url = document.URL;
var rv = url.indexOf("fos");
var hostname = url.substring(0, rv);
return hostname;
}

My grails action that returns JSON is as Follows

def userRoles = {

  /* This action gets the user roles and returns it as JSON*/
    def user = Users.findByUserName(params["userName"])
    def rolesInstanceList = Authorities.findAllByUser(user)

    def outputList = new JSONObject()
    def rolesList = new JSONArray()
    def jsonRole = null

    rolesInstanceList.each {
      jsonRole = new JSONObject()
      def role = it.role
      jsonRole.put("id", role.id)
      jsonRole.put("roleName", role.roleName)
      rolesList.put(jsonRole)
    }
    outputList.put("list", rolesList)
    render outputList as JSON      
}

I've created a class structure, where a DDCL is created generically and the code:

$('#selectorid').dropdownchecklist('destroy');

destroys the integrity of the DDCL that was initially created.

I found that this solution works much better for my application:

$('#selectorid').val(values);
$('#selectorid').dropdownchecklist('refresh');

where 'values' is an array of values (e.g. [1, 2, 3]). This does not destroy the integrity of the DDCL initially created.

Return some JSON with the state...

{
  "roles": {
    "role1": true,
    "role2": false
  },
  ...
}

Then some jQuery should do it...

$.each(json.roles, function(role, state) {

   $(':checkbox[name="' + role + '"]')[0].checked = state;

});