Categories > Your tips & tricks >

3 dependent <select> list-boxes using JavaScript

The forum is closed. Please use Stack Overflow for submitting new questions. Use tags: tinybutstrong , opentbs
By: Skrol29
Date: 2005-04-22
Time: 15:24

3 dependent <select> list-boxes using JavaScript

Here is a full example that shows how to make three dependent <select> list-boxes. The contents of sub-lists is refined each time the user select an item.
JavaScript is a good solution if the complete data is not to big in size because all possible data is merged into the Html page.

PHP:
<?php

include_once('tbs_class.php');

$con_id = mysql_connect('localhost','root','');
mysql_select_db('test');

$TBS = new clsTinyButStrong;
$TBS->LoadTemplate('test.htm');

$TBS->MergeBlock('b1,b1x',$con_id,'SELECT cont_id,cont_name FROM test_continent ORDER BY cont_name');
$TBS->MergeBlock('b2',$con_id,'SELECT cont_id,cntr_id,cntr_name FROM test_country ORDER BY cont_id,cntr_name');
$TBS->MergeBlock('b3',$con_id,'SELECT cont_id,t.cntr_id,twn_id,twn_name FROM test_country AS c INNER JOIN test_town AS t ON (c.cntr_id=t.cntr_id) ORDER BY cont_id,t.cntr_id,twn_name');

$TBS->Show();

?>

HTML (test.htm):
<html>
<head>
<title>TEST</title>
<script language="JavaScript" type="text/JavaScript">

var lst_continent = new Array();

[b1;block=begin]lst_continent[[b1.cont_id]] = {id: [b1.cont_id], name: '[b1.cont_name;htmlconv=js]', lst_country: new Array()};
[b1;block=end]

[b2;block=begin]lst_continent[[b2.cont_id]].lst_country[[b2.cntr_id]] = {id: [b2.cntr_id], name: '[b2.cntr_name;htmlconv=js]', lst_town: new Array()};
[b2;block=end]

[b3;block=begin]lst_continent[[b3.cont_id]].lst_country[[b3.cntr_id]].lst_town[[b3.twn_id]] = {id: [b3.twn_id], name: '[b3.twn_name;htmlconv=js]' };
[b3;block=end]

function f_Change_Continent() {
  var sel_continent = document.forms.frm_selection.elements.sel_continent;
  var sel_country   = document.forms.frm_selection.elements.sel_country;
  var sel_town      = document.forms.frm_selection.elements.sel_town;
  f_Init_List(sel_country,lst_continent[sel_continent.value].lst_country);
  f_Init_List(sel_town,false);
}
function f_Change_Country() {
  var sel_continent = document.forms.frm_selection.elements.sel_continent;
  var sel_country   = document.forms.frm_selection.elements.sel_country;
  var sel_town      = document.forms.frm_selection.elements.sel_town;
  f_Init_List(sel_town,lst_continent[sel_continent.value].lst_country[sel_country.value].lst_town);
}
function f_Change_Town() {
  window.alert('Item selected: '+document.forms.frm_selection.elements.sel_town.value);
}

function f_Init_List(lst,items) {
  var i = 0;
  lst.value = 0;
  // Erase all items but the first
  for (i=lst.options.length-1;i>0;i--) {
    lst.options[i] = null;
  }
  // Insert new items
  if (items!==false) {
    for (i in items) {
      lst.options[lst.options.length] = new Option(items[i].name,items[i].id);
    }
  }
 
}

</script>
</head>
<body>

<form action="" method="post" name="frm_selection" id="frm_selection">
  Continent:
  <select name="sel_continent" id="sel_continent" onChange="f_Change_Continent()">
    <option value="0">&lt;select a contient&gt;</option>
    <option value="[b1x.cont_id;block=option]" selected>[b1x.cont_name]</option>
  </select>
  Country:
  <select name="sel_country" id="sel_country" onChange="f_Change_Country()">
    <option value="0" selected>&lt;select a country&gt;</option>
  </select>
  Town:
  <select name="sel_town" id="sel_town" onChange="f_Change_Town()">
    <option value="0" selected>&lt;select a town&gt;</option>
  </select>
</form>

</body>
</html>


used SQL :

CREATE TABLE test_continent (
  cont_id int(11) NOT NULL auto_increment,
  cont_name varchar(50) NOT NULL default '',
  PRIMARY KEY  (cont_id)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

INSERT INTO test_continent VALUES (1, 'Europe');
INSERT INTO test_continent VALUES (2, 'Asia');
INSERT INTO test_continent VALUES (3, 'America');
INSERT INTO test_continent VALUES (4, 'Africa');
INSERT INTO test_continent VALUES (5, 'Oceania');

CREATE TABLE test_country (
  cntr_id int(11) NOT NULL auto_increment,
  cont_id int(11) NOT NULL default '0',
  cntr_name varchar(50) NOT NULL default '',
  PRIMARY KEY  (cntr_id)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=11 ;

INSERT INTO test_country VALUES (1, 1, 'France');
INSERT INTO test_country VALUES (2, 1, 'United Kindom');
INSERT INTO test_country VALUES (3, 2, 'China');
INSERT INTO test_country VALUES (4, 2, 'Japan');
INSERT INTO test_country VALUES (5, 3, 'USA');
INSERT INTO test_country VALUES (6, 3, 'Argentina');
INSERT INTO test_country VALUES (7, 4, 'Cameroon');
INSERT INTO test_country VALUES (8, 4, 'Tunisia');
INSERT INTO test_country VALUES (9, 5, 'Australia');
INSERT INTO test_country VALUES (10, 5, 'New Zealand');

CREATE TABLE test_town (
  twn_id int(11) NOT NULL auto_increment,
  cntr_id int(11) NOT NULL default '0',
  twn_name varchar(50) NOT NULL default '',
  PRIMARY KEY  (twn_id)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=18 ;

INSERT INTO test_town VALUES (1, 1, 'Paris');
INSERT INTO test_town VALUES (2, 1, 'Toulouse');
INSERT INTO test_town VALUES (3, 2, 'London');
INSERT INTO test_town VALUES (4, 2, 'Docklands');
INSERT INTO test_town VALUES (5, 3, 'Beijing');
INSERT INTO test_town VALUES (6, 3, 'Shanghai');
INSERT INTO test_town VALUES (7, 4, 'Tokyo');
INSERT INTO test_town VALUES (8, 4, 'Yokohama');
INSERT INTO test_town VALUES (9, 5, 'Washington');
INSERT INTO test_town VALUES (10, 5, 'New York');
INSERT INTO test_town VALUES (11, 6, 'Buenos Aires');
INSERT INTO test_town VALUES (12, 6, 'Santa Fe');
INSERT INTO test_town VALUES (13, 7, 'Yaoundé');
INSERT INTO test_town VALUES (14, 7, 'Garoua');
INSERT INTO test_town VALUES (15, 8, 'T?nis');
INSERT INTO test_town VALUES (16, 9, 'Syndey');
INSERT INTO test_town VALUES (17, 10, 'Auckland');
By: Col
Date: 2006-11-16
Time: 23:50

Re: 3 dependent <select> list-boxes using JavaScript

Great example Skrol29.

For those who don't have MySQL or can't be bothered messing around with it (even though Skrol29 has made that side of things very easy) just use this PHP script.

<?php

include_once('tbs_class.php');

$TBS = new clsTinyButStrong;
$TBS->LoadTemplate('test.htm');

$continents = array();
$continents[] = array('cont_id' => 4, 'cont_name' => 'Africa');
$continents[] = array('cont_id' => 3, 'cont_name' => 'America');
$continents[] = array('cont_id' => 2, 'cont_name' => 'Asia');
$continents[] = array('cont_id' => 1, 'cont_name' => 'Europe');
$continents[] = array('cont_id' => 5, 'cont_name' => 'Oceania');

$countries = array();
$countries[] = array('cont_id' => 1, 'cntr_id' => 1, 'cntr_name' => 'France');
$countries[] = array('cont_id' => 1, 'cntr_id' => 2, 'cntr_name' => 'United Kindom');
$countries[] = array('cont_id' => 2, 'cntr_id' => 3, 'cntr_name' => 'China');
$countries[] = array('cont_id' => 2, 'cntr_id' => 4, 'cntr_name' => 'Japan');
$countries[] = array('cont_id' => 3, 'cntr_id' => 5, 'cntr_name' => 'USA');
$countries[] = array('cont_id' => 3, 'cntr_id' => 6, 'cntr_name' => 'Argentina');
$countries[] = array('cont_id' => 4, 'cntr_id' => 7, 'cntr_name' => 'Cameroon');
$countries[] = array('cont_id' => 4, 'cntr_id' => 8, 'cntr_name' => 'Tunisia');
$countries[] = array('cont_id' => 5, 'cntr_id' => 9, 'cntr_name' => 'Australia');
$countries[] = array('cont_id' => 5, 'cntr_id' => 10, 'cntr_name' => 'New Zealand');

$towns = array();
$towns[] = array('cont_id' => 1, 'cntr_id' => 1, 'twn_id' => 1, 'twn_name' => 'Paris');
$towns[] = array('cont_id' => 1, 'cntr_id' => 1, 'twn_id' => 2, 'twn_name' => 'Toulouse');
$towns[] = array('cont_id' => 1, 'cntr_id' => 2, 'twn_id' => 3, 'twn_name' => 'London');
$towns[] = array('cont_id' => 1, 'cntr_id' => 2, 'twn_id' => 4, 'twn_name' => 'Docklands');
$towns[] = array('cont_id' => 2, 'cntr_id' => 3, 'twn_id' => 5, 'twn_name' => 'Beijing');
$towns[] = array('cont_id' => 2, 'cntr_id' => 3, 'twn_id' => 6, 'twn_name' => 'Shanghai');
$towns[] = array('cont_id' => 2, 'cntr_id' => 4, 'twn_id' => 7, 'twn_name' => 'Tokyo');
$towns[] = array('cont_id' => 2, 'cntr_id' => 4, 'twn_id' => 8, 'twn_name' => 'Yokohama');
$towns[] = array('cont_id' => 3, 'cntr_id' => 5, 'twn_id' => 9, 'twn_name' => 'Washington');
$towns[] = array('cont_id' => 3, 'cntr_id' => 5, 'twn_id' => 10, 'twn_name' => 'New York');
$towns[] = array('cont_id' => 3, 'cntr_id' => 6, 'twn_id' => 11, 'twn_name' => 'Buenos Aires');
$towns[] = array('cont_id' => 3, 'cntr_id' => 6, 'twn_id' => 12, 'twn_name' => 'Santa Fe');
$towns[] = array('cont_id' => 4, 'cntr_id' => 7, 'twn_id' => 13, 'twn_name' => 'Yaoundé');
$towns[] = array('cont_id' => 4, 'cntr_id' => 7, 'twn_id' => 14, 'twn_name' => 'Garoua');
$towns[] = array('cont_id' => 4, 'cntr_id' => 8, 'twn_id' => 15, 'twn_name' => 'T?nis');
$towns[] = array('cont_id' => 5, 'cntr_id' => 9, 'twn_id' => 16, 'twn_name' => 'Syndey');
$towns[] = array('cont_id' => 5, 'cntr_id' => 10, 'twn_id' => 17, 'twn_name' => 'Auckland');

$TBS->MergeBlock('b1,b1x',$continents);
$TBS->MergeBlock('b2',$countries);
$TBS->MergeBlock('b3',$towns);

$TBS->Show();

?>
By: Juan González
Date: 2009-11-17
Time: 21:58

Re: 3 dependent <select> list-boxes using JavaScript

What is the name of the php file?

The editor also tells me there is an error on the JS section on line 8 "[b1;block=begin]lst_continent[[b1.cont_id]] = {id: [b1.cont_id], name: '[b1.cont_name;htmlconv=js]', lst_country: new Array()};"

When I try to execute it doesn't work at all and if I'm trying to do it on the shell I get this: "Fatal error: Class 'clsTinyButStrong' not found..."

Could you help me a bit with this?

Thank you in advanced.

Cheers,

Juan
By: Anonymous
Date: 2009-11-20
Time: 03:36

Re: 3 dependent <select> list-boxes using JavaScript

The error message impliews that you have not correctly included the TBS class file
include_once('tbs_class.php');

? is the TBS class file in  the same directory ?
? maybe the PHP include path needs setting ?

HTH,
TomH