jQuery jCombo

Project Page

This plugin simplifies the process to populate data into SELECT tags, even if nested or not. The only condition is to put the fields in query consecutively in order to create pairs of [value],[text] inside the Json File. Unobtrusive, without fancy effects, just takes data as fast as possible.

Data Format (server side)

The output must be in json with "id" and "value" attributes to avoid javascript sorting and preserve order.

json response example:

[
    {"id":"1","value":"Alto Orinoco"},
    {"id":"2","value":"Atabapo"},
    {"id":"3","value":"Atures"},
    {"id":"4","value":"Autana"},
    {"id":"5","value":"Maroa"}
]

Example 1: Simple SELECT

<select name="country"></select> $("select[name='country']").jCombo({ url: "getCountries.php" });

Example 2: Nested Combos

<select id="list1"></select>
<select id="list2"></select>
<select id="list3"></select>

$(function() { 
    $("#list1").jCombo({
       url: "getEstados.php",
       selected_value : '15'
    });
    $("#list2").jCombo({
      url: "getMunicipios.php?id=",
      parent: "#list1",
      selected_value: '178'
    });
    $("#list3").jCombo({
      url: "getParroquias.php",
      input_param: "id",
      method: "POST"
      parent: "#list2",
      selected_value: '630'
    });
});

Options

url: url to retrieve the data, for child selects the url must be formatted to concat the ID (url + id)

input_param: Parameter name attached to the request (POST OR GET). for example "id" or "cityid"

parent: Parent SELECT element from which data is fetched

initial_text: Default message to select an option. if you set an empty value then does not shows any initial text.

selected_value: Sets the default value for select.

method: [ "GET" (default), "POST" ]

dataType: [ "json" , "jsonp" ] is an $.ajax dataType (jsonp as default)

Events

onChange: Event triggered when the parent select has changed.

onLoad: This event is executed when the data is loaded for the first time.