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.
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"}
]
<select name="country"></select>
$("select[name='country']").jCombo({ url: "getCountries.php" });
<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'
});
});
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)
onChange: Event triggered when the parent select has changed.
onLoad: This event is executed when the data is loaded for the first time.