Greetings!
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
immediately.
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,
rosicrucianpope-ga
----------------------------------------------
<html>
<head>
<title>Google Answers</title>
</head>
<body>
<!-- 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
}
</script>
<!-- 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>
</select>
<hr>
<!-- We create a div containing the text to be changed. -->
<div id="selected_password_question">
</div>
</form>
</body>
</html>
---------------------------------------------- |
,
1 Comment
)