Click here to Skip to main content
15,076,130 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!!
Kristin

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;
Posted
Updated 25-Jul-21 23:06pm

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:

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

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

console.log(extra.extra);
   

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