English | Español | Portugués | Deutsch | Française | Italiano | Россию | 日本 | Gaeilge | Català | Gallego

jQuery JCombo

jCombo - jQuery Cascading Select (Nested Combos).


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.

Author: Carlos De Oliveira cardeol(at)gmail(dot)com

Latest Release: 3.0 (dec 2013) jquery.jCombo.js

Latest Release: (Minified): jquery.jCombo.min.js

Project Page: https://github.com/cardeol/jCombo

Documentation


jCombo simplifies the process for doing it the easiest way.

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

or
$('#state').jCombo({ 
url: "getStates.php?id=", parent: "#country", // parent for nested combos initial_text: "-- Plese Select --", // Initial option selected_value: "5" // default selected value });

Options


url: A string containing the URL to which the request is sent.

parent: Parent SELECT element from which data is fetched

input_param: (Optional) Parameter name. By default the query parameter is passed in the url (url + id). When is defined is passed by GET or POST

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.

data: String containg the Data sent by POST or GET. Format: param1=value1¶m2=value2...

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

onChange: Event (function) triggered when SELECT element changes. Receives the selected value of the parent

onLoad: Event triggered after the select is loaded with all tha data.

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

Easy!

Examples & Demos



Client Side - HTML

Typical Select


State:
html: <select id="state1"></select>
javascript: $("#state1").jCombo({ url: "getStates.php" });
or
State:
html: <select id="state1"></select>
javascript:
$("#state3").jCombo({
url: "getStates.php", { initial_text: "-- Seleccione --", selected_value: "21" });

Nested Combos


State:
City: 
html:
	<select id="state2"></select>
	<select id="city2"></select>
javascript:
	$("#state2").jCombo({url: "getStates.php" });
	$("#city2").jCombo({
		url: "getCities.php", 
		input_param: "id", 
		parent: "#state2", 
		onChange: function(newvalue) {
			$("#message").text("parent has changed to value " + newvalue)
			.fadeIn("fast",function() {
$(this).fadeOut(3500);
}); } });

or

1:
2:
3:
html:
	<select name="list1" id="list1"></select>
	<select name="list2" id="list2"></select>
	<select name="list3" id="list3"></select>
javascript:
    $("#list1").jCombo({ url: "getEstados.php", selected_value : '15' } );
    $("#list2").jCombo({ url: "getMunicipios.php?id=",
					parent: "#list1",
					selected_value: '178'
				});		
    $("#list3").jCombo({ url: "getParroquias.php?id=",
					parent: "#list2",
					selected_value: '630'
				});
Server Side - PHP

The data response must be in this format (json encoded).:

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

getStates.php

<?php

    // Connect Database
    
mysql_connect("127.0.0.1","db_user","db_pass");     
    
mysql_select_db("db_name");
    
    
// Execute Query in the right order 
    //(value,text)
    
$query "SELECT id_state, state_name FROM states";
    
$result mysql_query($query);
    
$items = array();
    if(
$result && 
       
mysql_num_rows($result)>0) {
        while(
$row mysql_fetch_array($result)) {
            $option = array("id" => $row[0], "value" => htmlentities($row[1]));
           
$items[] = $option;

        }        
    }
    
mysql_close();
    $data = json_encode($items);
    
// convert into JSON format and print
    
$response = isset($_GET['callback'])?$_GET['callback']."(".
$data.")":$data;
    echo($response);   
?>

getCities.php

<?php

    // Connect Database
    
mysql_connect("127.0.0.1","db_user","db_pass");     
    
mysql_select_db("db_name");
    
    
// Get parameters from Array
    
$cityid = !empty($_GET['id'])
              ?
intval($_GET['id']):0;
    
    
// if there is no city selected by GET, fetch all rows    
    
$query "SELECT id_city,city_name FROM cities WHERE id_state = '$cityid'"
    
    
//  fetch the results
    
$result mysql_query($query);
    
$items = array();
    if(
$result && mysql_num_rows($result)>0) {
        while(
$row mysql_fetch_array($result)) {
            $option = array("id" => $row[0], "value" => htmlentities($row[1]));
           
$items[] = $option;
        }        
    }
    
mysql_close();
    $data = json_encode($items);
    $response = 
isset($_GET['callback'])?$_GET['callback']."(".$data.")":$data;
    echo($response); 
?>
Tags
jQuery, PHP, MySql, JSON, SELECT, Nested Combos, dependent select, html5, Combos anidados