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. Tweet

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

Latest Release:(feb 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("getCountries.php");

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

Options

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)

Easy!

Examples & Demos

Client Side - HTML

Typical Select

State:

html: <select id="state1"></select>
javascript: $("#state1").jCombo("getStates.php");

or
State:

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

Nested Combos

State:
City:

html: 
	<select id="state2"></select>
	<select id="city2"></select>
javascript:
	$("#state2").jCombo("getStates.php");
	$("#city2").jCombo("getCities.php?id=", { parent: "#state2" } );

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("getEstados.php", { selected_value : '15' } );
    $("#list2").jCombo("getMunicipios.php?id=", { 
					parent: "#list1", 
					selected_value: '178' 
				});		
    $("#list3").jCombo("getParroquias.php?id=", { 
					parent: "#list2",  
					selected_value: '630' 
				});

Server Side - PHP

Just need to get the data in this format (json encoded):

{
	"1":"Alto Orinoco",
	"2":"Huachamacare",
    "3":"Marawaka",
    "4":"Mavaca",
    "5":"Sierra Parima",
    "6":"Ucata",
    "7":"Yapacana",
    "8":"Caname"
}

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)) {


            $items[$row[0]] = htmlentities($row[1]);

        }        

    }

    mysql_close();


    // convert into JSON format and print

    $response = isset($_GET['callback'])?$_GET['callback']."(".json_encode($items).")":json_encode($items); 

    $cache->finish($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";


    


    //  else concatenate query with city id in order to filter.
    if($cityid>0) $query.=" WHERE id_state = '$cityid'"; 


    else $query.=" LIMIT 10";

    


    //  fetch the results
    $result = mysql_query($query);


    $items = array();

    if($result && mysql_num_rows($result)>0) {

        while($row = mysql_fetch_array($result)) {


            $items[$row[0]] = htmlentities($row[1]); 
        }        

    }

    mysql_close();



    $response = isset($_GET['callback'])?$_GET['callback']."(".json_encode($items).")":json_encode($items); 

    $cache->finish($response);  
?>