Jump to content
Sign in to follow this  
stevemessenger

How do I display selections from multiple dropdown menus

Recommended Posts

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

Share this post


Link to post
Share on other sites

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 by johncc

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by johncc

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...