Jump to content

Adding a specific form select depending on previous form select


Edward

Recommended Posts

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.

 

 

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.

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>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.