Google Answers Logo
View Question
Q: JavaScript/HTML: Getting a pulldown menu selection to appear as text later on ( Answered 5 out of 5 stars,   1 Comment )
Subject: JavaScript/HTML: Getting a pulldown menu selection to appear as text later on
Category: Computers > Internet
Asked by: fieldlily-ga
List Price: $12.00
Posted: 02 Oct 2006 13:23 PDT
Expires: 01 Nov 2006 12:23 PST
Question ID: 770233
I have three related questions on Google Answers right now. I think
these issues are likely to be trivial for anyone with a solid working
knowledge of web programming; I am pretty much a neophyte.

Sometimes I want users to be able to choose an option from a pull-down
menu, and then see their choice displayed (preferably as text) further
down on the page. So, if they selected the question "What is my
mother's maiden name?" from a pull-down menu, they would see the words
"What is my mother's maiden name?" show up in the text of the page
further down. Can I do this? How? (It would be okay if it showed up in
another form or something later on; it doesn't absolutely have to show
up as text, but that would be better.)

I would like to do this using JavaScript or HTML if possible.

Informed comments welcome!
Subject: Re: JavaScript/HTML: Getting a pulldown menu selection to appear as text later o
Answered By: rosicrucianpope-ga on 08 Oct 2006 16:05 PDT
Rated:5 out of 5 stars

I have attached a simple snippet of HTML that I wrote to illustrate
how the process works that you have described.  I will also describe
what is going on in the HTML here.

You are going to use Dynamic HTML (DHTML) to update the text area. 
This means that all of the elements on your page will need an ID and
an enclosing component .  Notice that the <select> element has an id
of "password_question" and the <div> on the bottom has an id of
"selected_password_question."  A div is a convenient way to wrap a
section of your page in a way where you can access it dynamically.  A
span is also sometimes used for this purpose.

Here are the steps required to get the functionality you seek:

-- Add the onchange handler to the select box.  In this case, it calls
the JavaScript function update_text() whenever the selection changes.
-- Add the containing element for the text that you want to change
upon selection.  This is the <div> at the bottom of the page.  Be sure
to give it an id.
-- Add the JavaScript method update_text().

Notice the use of document.getElementById() in the update_text()
method.  This is the standard way to obtain a reference to an object
in the DOM (the document object model, which is basically the
hierarchy of objects within the page).  Once you have the reference,
you can use methods of the object or change its properties.  In the
first line, we obtain the value of the dropdown.  In the second line,
we set the innerHTML property of the <div> to the value we obtained
above.  The innerHTML property is the actual contents of the div. 
When we set it through JavaScript, the change shows in the browser

You can cut and paste the code below into a page of your own and
verify that it works.  Once you are comfortable with it, feel free to
use it in your own code.

Happy scripting,


<title>Google Answers</title>

<!-- We'll separate the JavaScript into a function for clarity. -->
<script type="text/javascript">
function update_text() {
    // get the value of the selected item from the dropdown
    text = document.getElementById('password_question').value
    // set the contents of the text div
    document.getElementById('selected_password_question').innerHTML = text

<!-- The dropdown is contained in a form. -->
<form name="password_form">

<!-- This is the dropdown containing the different choices that you mentioned -->
<select id="password_question" onchange="update_text()">
<option value=""></option>
<option value="What is your mother's maiden name?">What is your
mother's maiden name?</option>
<option value="Where were you born?">Where were you born?</option>
<option value="What is your favorite color?">What is your favorite color?</option>


<!-- We create a div containing the text to be changed. -->
<div id="selected_password_question">



fieldlily-ga rated this answer:5 out of 5 stars and gave an additional tip of: $8.00
Thanks so much; awesome and complete!

Subject: Re: JavaScript/HTML: Getting a pulldown menu selection to appear as text later o
From: rosicrucianpope-ga on 11 Oct 2006 15:11 PDT
Thank you so much for your kind comments and the tip!


Important Disclaimer: Answers and comments provided on Google Answers are general information, and are not intended to substitute for informed professional medical, psychiatric, psychological, tax, legal, investment, accounting, or other professional advice. Google does not endorse, and expressly disclaims liability for any product, manufacturer, distributor, service or service provider mentioned or any opinion expressed in answers or comments. Please read carefully the Google Answers Terms of Service.

If you feel that you have found inappropriate content, please let us know by emailing us at with the question ID listed above. Thank you.
Search Google Answers for
Google Answers  

Google Home - Answers FAQ - Terms of Service - Privacy Policy