Adding a specific form select depending on previous form select

Edward · April 5, 2008

Hi,

I've not got much experience of javascript bt am pretty sure the following is possibe, but I don't know how to do it and I can't find any examples online. I have a drop down list in a form where people ca choose an artist. I want to create a second dropdown where people can choose an album, obviously it will only list lbums by the artist previously selected. Here's the very basic code I have so far:

<!--
					function selected_artist() {
						// see which artist is selected 
					}
					</script>
					<select name="form_press_kit_request_artist" size="1" onchange="select_artist()" />
						<option value="">Select</option>
						<option value="">----------</option>
						<option value="Artist 1"> Artist 1"</option>
						<option value="Artist 2">Artist 2</option>
						<option value="Artist 3">Artist 3</option>
					</select>
					function select_album() {
						// display a dropdown of albums of the selected artist 
					}

I'm not sure if this uses two scripts, like I'm expecting, or perhaps just one? But I did two as I think I need to define the first function before the form, and know I need to display the second dropdown after the first. Any help would be excellent.

Edward · April 5, 2008

I've have re-structured this and now have the following code:

<script type="text/javascript">
<!--
function test1_show() {
document.getElementById('test1').style.display="block";
document.getElementById('test2').style.display="none";
}
function test2_show() {
document.getElementById('test1').style.display="none";
document.getElementById('test2').style.display="block";
}
//-->
</script>
<select name="form_press_kit_request_artist" size="1" onchange="(SOME_FUCTION)" />
<option value="">Select</option>
<option value="">--------------------</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<p id="test1">You chose 1</p>
<p id="test2">You chose 2</p>
<script type="text/javascript">
<!--
document.getElementById('test1').style.display="none";
document.getElementById('test2').style.display="none";
//-->
</script>

What I need it to do is perform the appropriate function, depending on what is chosen in the drop-down select. i.e. if they choose '1', perform test1_show() and if they choose 2 perform test1_show(). Is this possible and is this the best way to achieve the desired effect?

Thank you in advance.

dumdumsareyum · April 5, 2008

I found this script a while back. It should help you learn how to do this. Also, you can modify it to use with php to get info out of a database, if you need to know how to do that let me know and I'll post an example of that too.

<html>
<head>
<title>Option List Examples</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<script language="Javascript">
<!--

function PopulateTeams() {

   var SportsList = document.frmMain.Sports;
   
   // Clear out the list of teams
   ClearOptions(document.frmMain.Teams);
   
   if (SportsList[sportsList.selectedIndex].value == "1") {
      AddToOptionList(document.frmMain.Teams, "1", "Oakland Athletics");
      AddToOptionList(document.frmMain.Teams, "2", "San Francisco Giants");
   }

   if (SportsList[sportsList.selectedIndex].value == "2") {
      AddToOptionList(document.frmMain.Teams, "3", "Oakland Raiders");
       AddToOptionList(document.frmMain.Teams, "4", "San Francisco 49ers");
   }

   if (SportsList[sportsList.selectedIndex].value == "3") {
      AddToOptionList(document.frmMain.Teams, "5", "Golden State Warriors");
      AddToOptionList(document.frmMain.Teams, "6", "Minnesota Timberwolves");
   }
}


function ClearOptions(OptionList) {

   // Always clear an option list from the last entry to the first
   for (x = OptionList.length; x >= 0; x = x - 1) {
      OptionList[x] = null;
   }
}


function AddToOptionList(OptionList, OptionValue, OptionText) {
   // Add option to the bottom of the list
   OptionList[OptionList.length] = new Option(OptionText, OptionValue);
}



//-->
</script>



<form name="frmMain">

<select name="Sports" onChange="PopulateTeams();" size="4">
<option>Choose a Sport</option>
<option value="1">Baseball</option>
<option value="2">Football</option>
<option value="3">Basketball</option>
</select>


<select name="Teams" size="3">
<option>                </option>
</select>

</form>


</body>
</html>

Sign In

Adding a specific form select depending on previous form select

Recommended Posts

Edward

Link to comment

Share on other sites

Edward

Link to comment

Share on other sites

dumdumsareyum

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information