Skipjackrick Posted February 4, 2009 Share Posted February 4, 2009 I have a small javascript that will fill in the names of the anglers on a team after they choose a specified team. However, I have reworked my database and now I would like the javascript to actually put a "value" in place of the anglers name. Does anybody know how to make javascript set an "option value" yet display the actual name on the page????? Currently the array looks like this teamLists["1"] = ["", "Oz", "Skipjack", "Curmit", "Old Salt", "Kip",]; What I want is this teamLists["1"] = ["", "1", "2", "3", "4", "5",]; However, I want the user to see this on the page when they select team #1. <option value="1">Oz</option> <option value="2">Skipjack</option> <option value="3">Curmit</option> <option value="4">Old Salt</option> <option value="5">Kip</option> Does this make sense? <script type="text/javascript"> //<![CDATA[ // array of possible team in the same order as they appear in the team selection list var teamLists = new Array(5) teamLists["empty"] = ["Select Angler"]; teamLists["1"] = ["", "Oz", "Skipjack", "Curmit", "Old Salt", "Kip",]; teamLists["2"] = ["", "Jolly Roger", "Oscar", "Altonr77", "Northpaw", "Cabeza de Vaca"]; teamLists["3"] = ["", "Puretexn", "ShawnQ", "Mando", "Cowboy", "Alamo"]; teamLists["4"] = ["", "Chazbo", "Bigfost", "Fla-Fish", "DancingWithBulls Sr.", "DancingWithBulls"]; teamLists["5"] = ["", "Artofficial", "Easily Yakked", "PierPressure", "FishinFools(Herb)", "FishinFools(Jan)"]; teamLists["6"] = ["", "Rod Dawg", "Latestart", "Aceshooter", "Randy", "Arnulfo"]; teamLists["7"] = ["", "Masonator", "Chainzter", "Roel115", "Gill Ripper", "Greatwhite72"]; teamLists["8"] = ["", "Krakatoa", "El Gallo", "Junior"]; teamLists["9"] = ["", "Johnny A", "Stray", "NickleBait", "Socom", "KiDd"]; teamLists["10"] = ["", "Yakmon", "Mr. Champ", "RaiderRed", "Repofish", "Shindle"]; /* teamChange() is called from the onchange event of a select element. * param selectObj - the select object which fired the on change event. */ function teamChange(selectObj) { // get the index of the selected option var idx = selectObj.selectedIndex; // get the value of the selected option var which = selectObj.options[idx].value; // use the selected option value to retrieve the list of items from the teamLists array cList = teamLists[which]; // get the team select element via its known id var cSelect = document.getElementById("angler"); // remove the current options from the team select var len=cSelect.options.length; while (cSelect.options.length > 0) { cSelect.remove(0); } var newOption; // create new options for (var i=0; i<cList.length; i++) { newOption = document.createElement("option"); newOption.value = cList[i]; // assumes option string and value are the same newOption.text=cList[i]; // add the new option try { cSelect.add(newOption); // this will fail in DOM browsers but is needed for IE } catch (e) { cSelect.appendChild(newOption); } } } //]]> </script> <select name="team_id" id="team_id" onChange="teamChange(this);"> <option value="0">Select Team</option> <option value="1">Rockstar</option> <option value="2">Plastic Pirates</option> <option value="3">Lone Star Sharkers</option> <option value="4">Roadrunner</option> <option value="5">Hawg Wild</option> <option value="6">Mojo</option> <option value="7">TAMUK Anglers</option> <option value="8">Krakatoa</option> <option value="9">Why Knot</option> <option value="10">Kraken</option> </select> <select name="angler" id="angler"> <option value="0">Select Angler</option> Quote Link to comment Share on other sites More sharing options...
webster08 Posted February 5, 2009 Share Posted February 5, 2009 you can access the innerHTML of the option tags with selectedIndex. this way; you keep the option's value and also get the name of the user (via the options innerHTML). Quote Link to comment Share on other sites More sharing options...
Skipjackrick Posted February 5, 2009 Author Share Posted February 5, 2009 you can access the innerHTML of the option tags with selectedIndex. this way; you keep the option's value and also get the name of the user (via the options innerHTML). Do What? Quote Link to comment Share on other sites More sharing options...
Skipjackrick Posted February 5, 2009 Author Share Posted February 5, 2009 you can access the innerHTML of the option tags with selectedIndex. this way; you keep the option's value and also get the name of the user (via the options innerHTML). Could you give an example? Quote Link to comment Share on other sites More sharing options...
webster08 Posted February 5, 2009 Share Posted February 5, 2009 you can access the innerHTML of the option tags with selectedIndex. this way; you keep the option's value and also get the name of the user (via the options innerHTML). Do What? nevermind; scratch that - i didn;t know what the heck you were talking about. i think i figured it out now; maybe try this and see if it was what you were wanting: <script type="text/javascript"> //<![CDATA[ // array of possible team in the same order as they appear in the team selection list var teamLists = new Array(5) teamLists["empty"] = ["Select Angler"]; teamLists["1"] = ["", "Oz", "Skipjack", "Curmit", "Old Salt", "Kip",]; teamLists["2"] = ["", "Jolly Roger", "Oscar", "Altonr77", "Northpaw", "Cabeza de Vaca"]; teamLists["3"] = ["", "Puretexn", "ShawnQ", "Mando", "Cowboy", "Alamo"]; teamLists["4"] = ["", "Chazbo", "Bigfost", "Fla-Fish", "DancingWithBulls Sr.", "DancingWithBulls"]; teamLists["5"] = ["", "Artofficial", "Easily Yakked", "PierPressure", "FishinFools(Herb)", "FishinFools(Jan)"]; teamLists["6"] = ["", "Rod Dawg", "Latestart", "Aceshooter", "Randy", "Arnulfo"]; teamLists["7"] = ["", "Masonator", "Chainzter", "Roel115", "Gill Ripper", "Greatwhite72"]; teamLists["8"] = ["", "Krakatoa", "El Gallo", "Junior"]; teamLists["9"] = ["", "Johnny A", "Stray", "NickleBait", "Socom", "KiDd"]; teamLists["10"] = ["", "Yakmon", "Mr. Champ", "RaiderRed", "Repofish", "Shindle"]; /* teamChange() is called from the onchange event of a select element. * param selectObj - the select object which fired the on change event. */ function teamChange(selectObj) { // get the index of the selected option var idx = selectObj.selectedIndex; // get the value of the selected option var which = selectObj.options[idx].value; // use the selected option value to retrieve the list of items from the teamLists array cList = teamLists[which]; // get the team select element via its known id var cSelect = document.getElementById("angler"); // remove the current options from the team select var len=cSelect.options.length; while (cSelect.options.length > 0) { cSelect.remove(0); } var newOption; // create new options for (var i=0; i<cList.length; i++) { newOption = document.createElement("option"); newOption.value = (i+1); // assumes option string and value are the same newOption.text=cList[i]; // add the new option try { cSelect.add(newOption); // this will fail in DOM browsers but is needed for IE } catch (e) { cSelect.appendChild(newOption); } } } //]]> </script> <select name="team_id" id="team_id" onChange="teamChange(this);"> <option value="0">Select Team</option> <option value="1">Rockstar</option> <option value="2">Plastic Pirates</option> <option value="3">Lone Star Sharkers</option> <option value="4">Roadrunner</option> <option value="5">Hawg Wild</option> <option value="6">Mojo</option> <option value="7">TAMUK Anglers</option> <option value="8">Krakatoa</option> <option value="9">Why Knot</option> <option value="10">Kraken</option> </select> <select name="angler" id="angler"> <option value="0">Select Angler</option> Quote Link to comment Share on other sites More sharing options...
Skipjackrick Posted February 5, 2009 Author Share Posted February 5, 2009 Did you change anything? Doesn't seem to be any changes? Basically i have a MySQL database that now lists the anglers 1, 2, 3, 4, 5, 6, 7, 8, etc. This way I can use a relational key to help display data in other pages. I can't figure out how to make this javascript output the numeric value in the form...... However, display the name of the angler in the page. Quote Link to comment Share on other sites More sharing options...
webster08 Posted February 5, 2009 Share Posted February 5, 2009 yeah i did; look at your code - it was one simple thing - did you actually test it before posting your reply? before: newOption.value = cList[i]; // assumes option string and value are the same after: newOption.value = (i+1); // assumes option string and value are the same test things out; before you reply with another question. Quote Link to comment Share on other sites More sharing options...
Skipjackrick Posted February 5, 2009 Author Share Posted February 5, 2009 Ooopps Sorry about that. I actually did finally test the code. I didn't see that small change you put in there. My apologies. It gave me the correct output When I chose Team #1 and the first angler. Output was "2" It gave me the correct output When I chose Team #1 and the 3rd angler. Output was "4" However, it gave me the exact same output for Team #2 and the first angler. Output was "2" Where, That angler should actually be "7" Thanks so much for help. I really appreciate it. yeah i did; look at your code - it was one simple thing - did you actually test it before posting your reply? before: newOption.value = cList[i]; // assumes option string and value are the same after: newOption.value = (i+1); // assumes option string and value are the same test things out; before you reply with another question. Quote Link to comment Share on other sites More sharing options...
Psycho Posted February 5, 2009 Share Posted February 5, 2009 <html> <head> <script type="text/javascript"> //<![CDATA[ // array of possible team in the same order as they appear in the team selection list var teamLists = new Array(); teamLists[1] = ["Oz", "Skipjack", "Curmit", "Old Salt", "Kip"]; teamLists[2] = ["Jolly Roger", "Oscar", "Altonr77", "Northpaw", "Cabeza de Vaca"]; teamLists[3] = ["Puretexn", "ShawnQ", "Mando", "Cowboy", "Alamo"]; teamLists[4] = ["Chazbo", "Bigfost", "Fla-Fish", "DancingWithBulls Sr.", "DancingWithBulls"]; teamLists[5] = ["Artofficial", "Easily Yakked", "PierPressure", "FishinFools(Herb)", "FishinFools(Jan)"]; teamLists[6] = ["Rod Dawg", "Latestart", "Aceshooter", "Randy", "Arnulfo"]; teamLists[7] = ["Masonator", "Chainzter", "Roel115", "Gill Ripper", "Greatwhite72"]; teamLists[8] = ["Krakatoa", "El Gallo", "Junior"]; teamLists[9] = ["Johnny A", "Stray", "NickleBait", "Socom", "KiDd"]; teamLists[10] = ["Yakmon", "Mr. Champ", "RaiderRed", "Repofish", "Shindle"]; /* teamChange() is called from the onchange event of a select element. * param selectObj - the select object which fired the on change event. */ function teamChange(selectObj) { // get the value of the selected option var selectValue = selectObj.options[selectObj.selectedIndex].value; // use the selected option value to retrieve the list of items from the teamLists array if(!teamLists[selectValue]) { anglerList = new Array(); } //Error handling anglerList = teamLists[selectValue] // get the team select element via its known id var anglerSelect = document.getElementById("angler"); // remove the current options from the team select anglerSelect.options.length = 0; //Determine the starting angler index anglerIdx = 1; for(var i=1; i<selectValue; i++) { anglerIdx += teamLists[i].length; } // create new options addOption(anglerSelect, 0, 'Select Angler'); for (var i=0; i<anglerList.length; i++) { addOption(anglerSelect, (i+anglerIdx), anglerList[i]); } } function addOption(selObj, optValue, optText) { var newOption = document.createElement('option'); newOption.value = optValue; newOption.text = optText; try { selObj.add(newOption); // this will fail in DOM browsers but is needed for IE } catch (e) { selObj.appendChild(newOption); } } //]]> </script> </head> <body> <select name="team_id" id="team_id" onChange="teamChange(this);"> <option value="0">Select Team</option> <option value="1">Rockstar</option> <option value="2">Plastic Pirates</option> <option value="3">Lone Star Sharkers</option> <option value="4">Roadrunner</option> <option value="5">Hawg Wild</option> <option value="6">Mojo</option> <option value="7">TAMUK Anglers</option> <option value="8">Krakatoa</option> <option value="9">Why Knot</option> <option value="10">Kraken</option> </select> <select name="angler" id="angler" onchange="alert(this.value)"> <option value="0">Select Angler</option> </body> </html> Quote Link to comment Share on other sites More sharing options...
Skipjackrick Posted February 6, 2009 Author Share Posted February 6, 2009 Sweet! Thanks mjdamato!!! Works Perfect! However, the only problem is if in the future the anglers decide to switch teams on me it won't be possible to use this code. But its simple and neat! Quote Link to comment Share on other sites More sharing options...
Psycho Posted February 6, 2009 Share Posted February 6, 2009 However, the only problem is if in the future the anglers decide to switch teams on me it won't be possible to use this code. You didn't provide any details about how you were going to use this information. If it were me I would be storing this information in a database. And, if you are doing that then the ID should be dictated by the ID in the database and not dynamically generated via JavaScript Quote Link to comment Share on other sites More sharing options...
Skipjackrick Posted February 6, 2009 Author Share Posted February 6, 2009 However, the only problem is if in the future the anglers decide to switch teams on me it won't be possible to use this code. You didn't provide any details about how you were going to use this information. If it were me I would be storing this information in a database. And, if you are doing that then the ID should be dictated by the ID in the database and not dynamically generated via JavaScript Sorry, I don't mean to sound like I am complaining. This will work perfect. I really appreciate your help. I have no idea how to setup php to populate my form. However, the database has a table labeled "angler" that has 3 fields. ID : NAME : TEAM_ID If I could ever get good enough at php I would just get the page to reload the second drop down according to the Team_ID. Do you know of a good tutorial on dynamic drop down boxes? This is probably not the appropriate place for this question though. Quote Link to comment Share on other sites More sharing options...
webster08 Posted February 6, 2009 Share Posted February 6, 2009 if i was you; i would do a google search for these key terms: "AJAX Chained Select Menu" you can use ajax to accomplish what your wanting to do. this way the page does not have to reload each time you change your select menu. of course; your still going to have to set up a php page; that connects to your database. here is an example: http://www.dhtmlgoodies.com/index.html?whichScript=ajax_chained_select good luck Quote Link to comment Share on other sites More sharing options...
Skipjackrick Posted February 6, 2009 Author Share Posted February 6, 2009 if i was you; i would do a google search for these key terms: "AJAX Chained Select Menu" you can use ajax to accomplish what your wanting to do. this way the page does not have to reload each time you change your select menu. of course; your still going to have to set up a php page; that connects to your database. here is an example: http://www.dhtmlgoodies.com/index.html?whichScript=ajax_chained_select good luck Dude!! This script is auesome! Thanks! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.