[SOLVED] javascript select menu problem

perezf · November 19, 2008

Hey everyone im a beginner in javascript and i was wondering who could help me?

Im having a problem with my javascript, that i made where i have 2 select boxes and one populates the other based on what you choose in the first one. The problem is after i choose the first one and then choose another and then go back to choose that same one the second select box will only show Undefined.

<html>
<head>
<title>Chain Select Menu</title>
<script type="text/javascript" language="Javascript">

	function setNames(url,name) {
		this.setUrl = url;
		this.setName = name;
	}

	var arraySetOne = Array(2);
	arraySetOne[0] = new setNames('http://www.spacenetmedia.com','SpaceNet-Media');
	arraySetOne[1] = new setNames('http://www.webomg.com','Online Media Group');
	var arraySetTwo = Array(2);
	arraySetTwo[0] = new setNames('http://www.google.com','Google');
	arraySetTwo[1] = new setNames('http://www.yahoo.com','Yahoo');

	function setState() {
		this.setValue = '';
		this.setValue = document.form1.fdrop.value;
		document.form1.fdrop2.options.length = 0;
		if(setValue == 1) {
			for(i=0;i<arraySetOne.length;i++) {
				this.optionUrl = arraySetOne[i].setUrl;
				this.optionName = arraySetOne[i].setName;
				arraySetOne[i] = document.createElement("OPTION");
				arraySetOne[i].text = optionName;
				arraySetOne[i].value = optionUrl;
				document.form1.fdrop2.options.add(arraySetOne[i]);
			}
		} else if(setValue == 2) {
			for(i=0;i<arraySetTwo.length;i++) {
				this.optionUrl = arraySetTwo[i].setUrl;
				this.optionName = arraySetTwo[i].setName;
				arraySetTwo[i] = document.createElement("OPTION");
				arraySetTwo[i].text = optionName;
				arraySetTwo[i].value = optionUrl;
				document.form1.fdrop2.options.add(arraySetTwo[i]);
			}
		}
	}

</script>
</head>
<body>
<form action="" method="POST" name="form1">

<select name="fdrop" onchange="javascript:setState();">
	<option value="">Select Value</option>
	<option value="1">Hosting</option>
	<option value="2">Search Engine</option>
</select>
<select name="fdrop2"></select>
</form>
</body>
</html>

perezf · November 19, 2008

I figured it out,

I had to declare the array within the function

I even added a go button so you can go to the url for each selection

Heres the completed code

<html>
<head>
<title>Chain Select Menu</title>
<script type="text/javascript" language="Javascript">

	function setNames(url,name) {
		this.setUrl = url;
		this.setName = name;
	}

	function setState() {

		var arraySetOne = Array();
		arraySetOne[0] = new setNames('http://www.spacenetmedia.com','SpaceNet-Media');
		arraySetOne[1] = new setNames('http://www.webomg.com','Online Media Group');
		var arraySetTwo = Array();
		arraySetTwo[0] = new setNames('http://www.google.com','Google');
		arraySetTwo[1] = new setNames('http://www.yahoo.com','Yahoo');

		var setValue = document.form1.fdrop.value;
		document.form1.fdrop2.options.length = 0;
		if(setValue == 1) {
			for(i=0;i<arraySetOne.length;i++) {
				var optionUrl = arraySetOne[i].setUrl;
				var optionName = arraySetOne[i].setName;
				arraySetOne[i] = document.createElement("OPTION");
				arraySetOne[i].text = optionName;
				arraySetOne[i].value = optionUrl;
				document.form1.fdrop2.options.add(arraySetOne[i]);
			}
		} else if(setValue == 2) {
			for(i=0;i<arraySetTwo.length;i++) {
				var optionUrl = arraySetTwo[i].setUrl;
				var optionName = arraySetTwo[i].setName;
				arraySetTwo[i] = document.createElement("OPTION");
				arraySetTwo[i].text = optionName;
				arraySetTwo[i].value = optionUrl;
				document.form1.fdrop2.options.add(arraySetTwo[i]);
			}
		}
	}

	function goToPage() {
		if(document.form1.fdrop2.value != '') {
			window.location.href = document.form1.fdrop2.value;
		}
	}

</script>
</head>
<body>
<form action="" method="POST" name="form1">

<select name="fdrop" onchange="javascript:setState();">
	<option value="">Select Value</option>
	<option value="1">Hosting</option>
	<option value="2">Search Engine</option>
</select>
<select name="fdrop2"></select>
<input type="button" name="gotopage" value="Go To Page" onclick="javascript:goToPage();" />
</form>
</body>
</html>

Sign In

[SOLVED] javascript select menu problem

Recommended Posts

perezf

Link to comment

Share on other sites

perezf

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information