Chained Selects

Discussion in 'HTML & Website Design' started by pmarkov, Oct 24, 2007.

0
  1. #1
    Hello,

    Do you know how to create a form with three drop-down fields - the second depends on the first and the third depends on the first too.

    Could somebody help me?

    Thank you
     
    pmarkov, Oct 24, 2007 IP
  2. Mike H.

    Mike H. Peon

    Messages:
    219
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #2 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<script type="text/javascript">
 	
	var categories = [];
	categories["startList"] = ["Apparel","Books"]
	categories["Apparel"] = ["Men","Women"];
	categories["Books"] = ["Biography","Fiction","Nonfiction"];
	categories["Men"] = ["Shirts","Ties","Belts"];
	categories["Women"] = ["Blouses","Skirts","Scarves"];
	categories["Biography"] = ["Contemporay","Historical","Other"];
	categories["Fiction"] = ["Science","Romance"];
	categories["Nonfiction"] = ["How-To","Travel","Cookbooks"];

	var nLists = 3; // number of lists in the set

	function fillSelect(currCat,currList){

		var step = Number(currList.name.replace(/\D/g,""));
		for (i=step; i<nLists+1; i++)
			{
			 document.forms[0]['List'+i].length = 1;
			 document.forms[0]['List'+i].selectedIndex = 0;
			}
		var nCat = categories[currCat];
		for (each in nCat)
			{
			 var nOption = document.createElement('option'); 
			 var nData = document.createTextNode(nCat[each]); 
			 nOption.setAttribute('value',nCat[each]); 
			 nOption.appendChild(nData); 
			 currList.appendChild(nOption); 
			} 
	}

	function getValue(isValue){

		alert(isValue);
	}


	function init(){

		fillSelect('startList',document.forms[0]['List1'])
	}

	onload=init;

</script>
<style type="text/css">

	body {margin-top: 65px;}
	form {width:425px; margin:auto;}

</style>
</head>
<body>
	<form action="">
		<select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
			<option selected>Make a selection</option>
		</select>
		&nbsp;
		<select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
			<option selected>Make a selection</option>
		</select>
		&nbsp;
		<select name='List3' onchange="getValue(this.value)">
			<option selected >Make a selection</option>
		</select>
	</form>
</body>
</html>
    Code (markup):
     
    Mike H., Oct 24, 2007 IP
  3. AstarothSolutions

    AstarothSolutions Peon

    Messages:
    2,680
    Likes Received:
    77
    Best Answers:
    0
    Trophy Points:
    0
    #3
    normally they are called cascading drop downs.

    You can do it with javascript or ajax subject to the number of options that are going to be in the final drop down
     
    AstarothSolutions, Oct 24, 2007 IP
  4. AstarothSolutions

    AstarothSolutions Peon

    Messages:
    2,680
    Likes Received:
    77
    Best Answers:
    0
    Trophy Points:
    0
    #4
    normally they are called cascading drop downs.

    You can do it with javascript or ajax subject to the number of options that are going to be in the final drop down
     
    AstarothSolutions, Oct 24, 2007 IP