stevemessenger Posted July 23, 2014 Share Posted July 23, 2014 I am new to Javascript so please be patient. Here I have two dropdown lists each with an alert to display the list selection. My code is a duplicated adaptation of a w3schools example.Both alert messages show selections from the "keyName" list because (I assume) both alert messages use getElementsByTagName("option").if I put the variables keyN and keyT alone in the alert functions they display the expected selection index numbers. Is there a way to link 'option' to 'select id' that forces the correct list to be read? Or perhaps another way to approach the task?Thanks in advance for any advice.codeblock<!DOCTYPE html><html><body>//List#1<select id="keyName"><option value="C">C</option><option value="D">D</option><option value="E">E</option><option value="F">F</option></select>//List#2<select id="keyType"><option value="major">major</option><option value="minor">minor</option></select><button type="button" onclick="getKey()">Get Key</button> //displays C/D/E/F<button type="button" onclick="getType()">Get Type</button> //displays C/D<script>function getKey() { var keyN = document.getElementById("keyName").selectedIndex; alert(document.getElementsByTagName("option")[keyN].value);}function getType() { var keyT = document.getElementById("keyType").selectedIndex; alert(document.getElementsByTagName("option")[keyT].value);}</script></body></html>/codeblock Link to comment Share on other sites More sharing options...
johncc Posted July 24, 2014 Share Posted July 24, 2014 (edited) The individual option lists are separately accessible. Try these for your functions function getKey() { var keyN = document.getElementById("keyName"); alert(keyN[keyN.selectedIndex].value);}function getType() { var keyT = document.getElementById("keyType"); alert(keyT[keyT.selectedIndex].value);} Edited July 24, 2014 by johncc Link to comment Share on other sites More sharing options...
stevemessenger Posted July 24, 2014 Author Share Posted July 24, 2014 Thanks for your prompt reply. Console.log shows keyN to be "<select id="keyType">" rather than directly assigning a value to keyN. This introduces a coding concept beyond my present understanding. I will use this as a starting point for further study. Link to comment Share on other sites More sharing options...
johncc Posted July 24, 2014 Share Posted July 24, 2014 (edited) I assume there is a typo. My KeyT is indeed a select input with id="keyType">" document.getElementsByTagName("option") returns an alphabetically sorted (by value) collection of all (6) of the objects of type option on the page. ie C, D, E, F, major, minor. Your values of KeyT and KeyN will index into that collection. Since your KeyT can only have values of 0 or 1, it will always return either C or D not the expected minor or major. Maybe I can make it clearer by including an extra line in my getType. function getType() { var keyT = document.getElementById("keyType"); // the select object var tIndex = keyT.selectedIndex; // the index of the selected option alert(keyT[tIndex].value); // the value of the selected option} Edited July 24, 2014 by johncc Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now