Click here to Skip to main content
15,506,981 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi -- I am brand, brand new to coding so please bear with me. I want to create a drop down menu with options that, when selected, display different lines of text. Specifically, I want to have a drop down menu of book titles, pick one and a different recommended book title is displayed.
I know how to get the selected option to display with JavaScript but I want to display something totally different.
I really appreciate any help -- even just a point in the right direction. thank you!!

What I have tried:

--select book--
sample title
another title

function ddselect()
var d=document.getElementByID("ddselect")
var displaytext=d.options [d.selectedIndex}.text;
document.getElementByID ("txtvalue").value=displaytext;
Updated 26-Jul-21 0:06am

1 solution

One way you could achieve this is to use the data- attributes which can be applied to elements. Using JS you can select the data attribute values to get additional content for each option: JSFiddle Example[^]

If you need to supply more complex information then you'll probably need to store an array of objects in the JS code and use the selectedIndex to get the correct object. Something akin to:

const data = [
  { extra: 'I am extra data' },
  { extra: 'I am also extra data' }

const index = d.selectedIndex;
const extra = data[index];

Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900