mpsn Posted January 4, 2012 Share Posted January 4, 2012 Hi, the javaScript should have an alert popup indicating the ith <option> selected (the index), but its not working. Here's the HTML: <!DOCTYPE html> <html> <head><title>HTML5, CSS3, CSS, JavaScript, AJAX practice</title> <script type="text/javascript" src="js_.js" ></script> </head> <body> <form id="form_2"> <br /><br /> <select id="select_1" size="4" onchange="whichPet(document.getElementById('select_1'));"> <option>golden retriever</option> <option>siamese cat</option> <option>goldfish</option> <option>parrot</option> </select> </form> </body> </html> here's the JS in external script: js_.js function whichPet(var petList) { alert("You selected " + petList.options[selectedIndex].text); } Link to comment https://forums.phpfreaks.com/topic/254310-help-with-selection-and-alert/ Share on other sites More sharing options...
AyKay47 Posted January 4, 2012 Share Posted January 4, 2012 whats it doing Link to comment https://forums.phpfreaks.com/topic/254310-help-with-selection-and-alert/#findComment-1303972 Share on other sites More sharing options...
AyKay47 Posted January 4, 2012 Share Posted January 4, 2012 i guess i'll show you, im going to add values to your options, which should be done anyway. <!DOCTYPE html> <html> <head><title>HTML5, CSS3, CSS, JavaScript, AJAX practice</title> <script type="text/javascript" src="js_.js" ></script> </head> <body> <form id="form_2"> <br /><br /> <select id="select_1" size="4" onchange="whichPet(document.getElementById('select_1').selectedIndex);"> <option value='golden retriever'>golden retriever</option> <option value='siamese cat'>siamese cat</option> <option value='goldfish'>goldfish</option> <option value='parrot'>parrot</option> </select> </form> </body> </html> external function whichPet(petListIndex) { var obj = document.getelementById("select_1"); alert("You selected " + obj.options[petListIndex].value); } Link to comment https://forums.phpfreaks.com/topic/254310-help-with-selection-and-alert/#findComment-1303978 Share on other sites More sharing options...
mpsn Posted January 4, 2012 Author Share Posted January 4, 2012 Thanks, it works now. I was reading a javascript tutorial since w3schools is dry and boring, but that tutorial for the most part was good (it was written in 2010), but it said to use: <select name="choose_category" onchange="swapOptions(window.document.the_form.choose_category.options[selectedIndex].text);"> and it did not include text property in the <option> tag. Link to comment https://forums.phpfreaks.com/topic/254310-help-with-selection-and-alert/#findComment-1303999 Share on other sites More sharing options...
scootstah Posted January 4, 2012 Share Posted January 4, 2012 .text selects the text inside the option, IE <option>HERE</option> .value selects the value of the option, IE <option value="HERE"></option> Link to comment https://forums.phpfreaks.com/topic/254310-help-with-selection-and-alert/#findComment-1304002 Share on other sites More sharing options...
AyKay47 Posted January 4, 2012 Share Posted January 4, 2012 Thanks, it works now. I was reading a javascript tutorial since w3schools is dry and boring, but that tutorial for the most part was good (it was written in 2010), but it said to use: <select name="choose_category" onchange="swapOptions(window.document.the_form.choose_category.options[selectedIndex].text);"> and it did not include text property in the <option> tag. .text will work technically, however you should always include a back end alternative for those that do not have javascript enabled in their browser, so you would want to have values for your <option>s anyway. Link to comment https://forums.phpfreaks.com/topic/254310-help-with-selection-and-alert/#findComment-1304011 Share on other sites More sharing options...
Adam Posted January 4, 2012 Share Posted January 4, 2012 i guess i'll show you, im going to add values to your options, which should be done anyway. <!DOCTYPE html> <html> <head><title>HTML5, CSS3, CSS, JavaScript, AJAX practice</title> <script type="text/javascript" src="js_.js" ></script> </head> <body> <form id="form_2"> <br /><br /> <select id="select_1" size="4" onchange="whichPet(document.getElementById('select_1').selectedIndex);"> <option value='golden retriever'>golden retriever</option> <option value='siamese cat'>siamese cat</option> <option value='goldfish'>goldfish</option> <option value='parrot'>parrot</option> </select> </form> </body> </html> external function whichPet(petListIndex) { var obj = document.getelementById("select_1"); alert("You selected " + obj.options[petListIndex].value); } Why do you manually create an object instead of using this, then only pass in the selectedIndex so that you have to recreate the same object within the function, when you could have just passed it in? whichPet(this); function whichPet(select) { alert("You selected " + select.options[select.selectedIndex].value); } Link to comment https://forums.phpfreaks.com/topic/254310-help-with-selection-and-alert/#findComment-1304191 Share on other sites More sharing options...
AyKay47 Posted January 4, 2012 Share Posted January 4, 2012 i guess i'll show you, im going to add values to your options, which should be done anyway. <!DOCTYPE html> <html> <head><title>HTML5, CSS3, CSS, JavaScript, AJAX practice</title> <script type="text/javascript" src="js_.js" ></script> </head> <body> <form id="form_2"> <br /><br /> <select id="select_1" size="4" onchange="whichPet(document.getElementById('select_1').selectedIndex);"> <option value='golden retriever'>golden retriever</option> <option value='siamese cat'>siamese cat</option> <option value='goldfish'>goldfish</option> <option value='parrot'>parrot</option> </select> </form> </body> </html> external function whichPet(petListIndex) { var obj = document.getelementById("select_1"); alert("You selected " + obj.options[petListIndex].value); } Why do you manually create an object instead of using this, then only pass in the selectedIndex so that you have to recreate the same object within the function, when you could have just passed it in? whichPet(this); function whichPet(select) { alert("You selected " + select.options[select.selectedIndex].value); } yeah, thumbs up Link to comment https://forums.phpfreaks.com/topic/254310-help-with-selection-and-alert/#findComment-1304247 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.