Fill in a second select box dependent on the first one.

Code

$(document).ready(function()
 {
         "Vegetables": {
              "key" : 10,
                 "defaultvalue" : 111,
              "values" : {
                     "tomato": 110,
                     "potato": 111,
                     "asparagus": 112
                     }
              },
            "Fruits": {
                 "key" : 20,
                 "defaultvalue" : 212,
                 "values" : {
                     "apple": 210,
                     "orange": 211,
                     "kiwi": 212,
                     "melon": 213
                     }
              }
    };
    $('#first').doubleSelect('second', selectoptions);      
 });

With Empty Option

var options = {emptyOption: true};
    $('#first').doubleSelect('second', selectoptions, options);  

With Pre Select and Customized Empty Option

 var options = {
                    preselectFirst : 10, 
                    preselectSecond : 112, 
                    emptyOption: true, 
                    emptyValue: '...', 
                    emptyKey: 'nothing'
                   };
                   
    $('#first').doubleSelect('second', selectoptions, options);