Edward Posted April 5, 2008 Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/99678-adding-a-specific-form-select-depending-on-previous-form-select/ Share on other sites More sharing options...
Edward Posted April 5, 2008 Author Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/99678-adding-a-specific-form-select-depending-on-previous-form-select/#findComment-509940 Share on other sites More sharing options...
dumdumsareyum Posted April 5, 2008 Share Posted 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> Link to comment https://forums.phpfreaks.com/topic/99678-adding-a-specific-form-select-depending-on-previous-form-select/#findComment-510257 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.