Control for data with list of options as drop down list. Also this is the default control if schema enum properties has more than three array elements.

List of supported JSON schema keywords.

List of supported LittleCub config options.

Example 1 :

Select control with data and schema parameter.

Native API

var selectControl1 = LittleCub("giant panda", null, {
    "type" : "string",
    "enum" : ["giant panda", "polar bear", "grizzly bear", "atlas bear", "blue bear"]
}, document.getElementById('select-control-1'));

jQuery API

var selectControl1j = $('#select-control-1-j').lc("giant panda", null, {
    "type" : "string",
    "enum" : ["giant panda", "polar bear", "grizzly bear", "atlas bear", "blue bear"]
});

Example 2 :

Select control with data, configs and schema parameters.

Native API

var selectControl2 = LittleCub("giant panda", {
    "type" : "select"
}, {
    "type" : "string",
    "enum" : ["giant panda", "polar bear"]
}, document.getElementById('select-control-2'));

jQuery API

var selectControl2j = $('#select-control-2-j').lc("giant panda", {
    "type" : "select"
}, {
    "type" : "string",
    "enum" : ["giant panda", "polar bear"]
});

Example 3 :

Select control for required string data with option labels.

Native API

var selectControl3 = LittleCub("giant panda", {
    "type" : "select",
    "label" : "Pick your favorite bear:",
    "required" : true,
    "options" : ["Giant panda", "Polar bear", "Grizzly bear", "Atlas bear", "Blue bear"]
}, {
    "type" : "string",
    "enum" : ["giant panda", "polar bear", "grizzly bear", "atlas bear", "blue bear"]
}, document.getElementById('select-control-3'));

jQuery API

var selectControl3j = $('#select-control-3-j').lc("giant panda", {
    "type" : "select",
    "label" : "Pick your favorite bear:",
    "required" : true,
    "options" : ["Giant panda", "Polar bear", "Grizzly bear", "Atlas bear", "Blue bear"]
}, {
    "type" : "string",
    "enum" : ["giant panda", "polar bear", "grizzly bear", "atlas bear", "blue bear"]
});

Example 4 :

Select control for required integer data and rendered with the option labels.

Native API

var selectControl4 = LittleCub(5, {
    "type" : "select",
    "label" : "Pick your favorite number:",
    "required" : true,
    "options" : {
        "1" : "One",
        "2" : "Two",
        "3" : "Three",
        "4" : "Four",
        "5" : "Five"
    }
}, {
    "type" : "integer",
    "enum" : [1, 2, 3, 4, 5]
}, document.getElementById('select-control-4'));

jQuery API

var selectControl4j = $('#select-control-4-j').lc(5, {
    "type" : "select",
    "label" : "Pick your favorite number:",
    "required" : true,
    "options" : {
        "1" : "One",
        "2" : "Two",
        "3" : "Three",
        "4" : "Four",
        "5" : "Five"
    }
}, {
    "type" : "string",
    "enum" : [1, 2, 3, 4, 5]
});

Example 5 :

Select control with multiple selections.

Native API

var selectControl5 = LittleCub([2,5], {
    "type" : "select",
    "label" : "Pick your favorite number:",
    "required" : true,
    "multiple" : true,
    "size" : 4,
    "options" : {
        "1" : "One",
        "2" : "Two",
        "3" : "Three",
        "4" : "Four",
        "5" : "Five"
    }
}, {
    "type" : "array",
    "minItems": 2,
    "maxItems": 3,
    "items" : {
        "type" : "integer",
        "enum" : [1, 2, 3, 4, 5]
    }
}, document.getElementById('select-control-5'));

jQuery API

var selectControl5j = $('#select-control-5-j').lc([2,5], {
    "type" : "select",
    "label" : "Pick your favorite number:",
    "required" : true,
    "multiple" : true,
    "size" : 4,
    "options" : {
        "1" : "One",
        "2" : "Two",
        "3" : "Three",
        "4" : "Four",
        "5" : "Five"
    }
}, {
    "type" : "array",
    "minItems": 2,
    "maxItems": 3,
    "items" : {
        "type" : "integer",
        "enum" : [1, 2, 3, 4, 5]
    }
});