jCombo - jQuery Cascading Select (Nested Combos).

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.

parent_value: Sets de default render for the element (only when element is nested)

Easy!

Examples & Demos

Client Side - HTML

Typical Select

Country:

html: <select id="example1"></select>

javascript: $("#example1_country").jCombo("getCountries.php");

or
State:

html: <select id="example2_state"></select>

javascript:
$("#example2_state").jCombo("getStates.php?id_country=2", { 
    initial_text: "** Select State **", 
    selected_value: "5"
});

Nested Combos

Country:
State:

html: 
	<select id="example3_country"></select>
	<select id="example3_state"></select>

javascript:
	$("#example2_country").jCombo("getCountries.php");
	$("#example2_state").jCombo("getStates.php?id_country=", { parent: "#example2_country" } );

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("getCountries.php.php", { selected_value : '1' } );
    $("#list2").jCombo("getStates.php?id_country=", { 
					parent: "#list1", 
					selected_value: '2' 
				});		
    $("#list3").jCombo("getCities.php?id_state=", { 
					parent: "#list2", 
					selected_value: 4 
				});