Welcome to WebmasterWorld Guest from 50.17.114.227

Forum Moderators: open

Message Too Old, No Replies

Text change on repeated drop-down lists

     
11:59 am on Mar 9, 2012 (gmt 0)

New User

joined:Mar 9, 2012
posts: 2
votes: 0


Hello! I'm relatively new to javascript, and could use a little help. I want text to change based on the option selected in a drop-down list. The problem is, the exact same drop-down list will appear multiple times on the page, and this script only works for the first one.

Any suggestions how to handle this?
Thanks!

Cheers,
Wren

<html>
<head><script type="text/javascript">

var textBlocks = new Array(
'Select an option',
'G1 Choice1 description',
'G1 Choice2 description',
'G2 Choice1 description',
'G2 Choice2 description');

function changeText(elemid) {
var ind = document.getElementById(elemid).selectedIndex;
document.getElementById("display").innerHTML=textBlocks[ind];
}
</script></head>

<body>
<form>
<table>
<tr>
<td>Person 1</td>
<td>Information</td>
<td><select id="choice" onchange="changeText('choice')">
<option>Select</option>
<optgroup label="Category 1">
<option>G1 Choice1</option>
<option>G1 Choice2</option>
</optgroup>
<optgroup label="Category 2">
<option>G2 Choice1</option>
<option>G2 Choice2</option>
</optgroup>
</select></td>
<td><div id="display">Select an option</div></td></tr>
<tr>
<td>Person 2</td>
<td>Information</td>
<td><select id="choice" onchange="changeText('choice')">
<option>Select</option>
<optgroup label="Category 1">
<option>G1 Choice1</option>
<option>G1 Choice2</option>
</optgroup>
<optgroup label="Category 2">
<option>G2 Choice1</option>
<option>G2 Choice2</option>
</optgroup>
</select></td>
<td><div id="display">Select an option</div></td></tr>
</table></form></body>
</html>
2:45 pm on Mar 9, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4965
votes: 10


Welcome to WebmasterWorld!
The problem is that you're using the same id multiple times, which is invalid. An id has to be unique. So start by giving everything a unique id. Then modify your changeText function to take another parameter, your target (instead of hard coding "display").


<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<table>
<tr>
<td>Person 1</td>
<td>Information</td>
<td>
<select id="choice1" onchange="changeText('choice1', 'display1')">
<option>Select</option>
<optgroup label="Category 1">
<option>G1 Choice1</option>
<option>G1 Choice2</option>
</optgroup>
<optgroup label="Category 2">
<option>G2 Choice1</option>
<option>G2 Choice2</option>
</optgroup>
</select>
</td>
<td>
<div id="display1">Select an option</div>
</td>
</tr>
<tr>
<td>Person 2</td>
<td>Information</td>
<td>
<select id="choice2" onchange="changeText('choice2', 'display2')">
<option>Select</option>
<optgroup label="Category 1">
<option>G1 Choice1</option>
<option>G1 Choice2</option>
</optgroup>
<optgroup label="Category 2">
<option>G2 Choice1</option>
<option>G2 Choice2</option>
</optgroup>
</select>
</td>
<td>
<div id="display2">Select an option</div>
</td>
</tr>
</table>
</form>
<script>
var textBlocks = [
'Select an option',
'G1 Choice1 description',
'G1 Choice2 description',
'G2 Choice1 description',
'G2 Choice2 description'
];

function changeText(elemid, displayId) {
var ind = document.getElementById(elemid).selectedIndex;
document.getElementById(displayId).innerHTML = textBlocks[ind];
}
</script>
</body>
</html>

Note, I've moved the script to just before the closing body tag (that's the best place to put scripts). I've removed the type attribute (not needed). And I've cleaned up your array (don't use "new Array", use array literals instead).

Hope that helps.
4:05 pm on Mar 9, 2012 (gmt 0)

New User

joined:Mar 9, 2012
posts: 2
votes: 0


Thank you so much! This was exactly what I needed; it works beautifully. And extra thanks for the helpful hints :-)
6:33 pm on Mar 9, 2012 (gmt 0)

Junior Member

5+ Year Member

joined:Feb 7, 2010
posts: 119
votes: 0


I'm standing on the shoulders of giants here (fotiman), but I thought I'd take this to the next level for practice and hopefully to help out like so many have helped me.

I removed the table element to conform to accepted standards...


<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form id='info'>
<fieldset><legend>Person 1 Information</legend>
<select id="choice1">
<option>Select</option>
<optgroup label="Category 1">
<option>G1 Choice1</option>
<option>G1 Choice2</option>
</optgroup>
<optgroup label="Category 2">
<option>G2 Choice1</option>
<option>G2 Choice2</option>
</optgroup>
</select><span id="display1"> Select an option</span>
</fieldset>

<fieldset><legend>Person 2 Information</legend>
<select id="choice2">
<option>Select</option>
<optgroup label="Category 1">
<option>G1 Choice1</option>
<option>G1 Choice2</option>
</optgroup>
<optgroup label="Category 2">
<option>G2 Choice1</option>
<option>G2 Choice2</option>
</optgroup>
</select><span id="display2"> Select an option</span>
</fieldset>
<fieldset>
<input type='reset' value='reset' id='reset' />
</fieldset>
</form>
<script type='text/javascript' src='scripts/external.js'></script>
</body>
</html>


...and took it just a bit further by employing unobtrusive JavaScript.

external.js file

function select_options(){
var textBlocks = [
'Select an option',
'G1 Choice1 description',
'G1 Choice2 description',
'G2 Choice1 description',
'G2 Choice2 description'
];

document.getElementById('choice1').onchange=function(){
var ind = document.getElementById('choice1').selectedIndex;
document.getElementById('display1').innerHTML = ' '+textBlocks[ind];
}

document.getElementById('choice2').onchange=function(){
var ind = document.getElementById('choice2').selectedIndex;
document.getElementById('display2').innerHTML = ' '+textBlocks[ind];
}
}

function func_reset() {
document.getElementById('reset').onclick=function(){
document.getElementById('display1').innerHTML=" Select an option";
document.getElementById('display2').innerHTML=" Select an option";
}
}

window.onload=function(){
select_options();
func_reset();
}


Hmmm, now if I can just learn how to indent code!
7:12 pm on Mar 9, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4965
votes: 10



I removed the table element to conform to accepted standards...

In this particular case, I think the data *is* somewhat tabular.
I agree with moving the script to an external file as well, though you don't need the type attribute (HTML5). I also agree with the unobtrusive JavaScript. :) One thing to consider... if the select element is going to function correctly only when JavaScript is enabled, then perhaps the select element(s) should be removed from the HTML markup as well and generated by the JavaScript.


Hmmm, now if I can just learn how to indent code!

I wrap my code examples with [quote][pre][code][/code][/pre][/quote]
6:48 pm on Mar 12, 2012 (gmt 0)

Junior Member

5+ Year Member

joined:Feb 7, 2010
posts: 119
votes: 0


Thanks for the pre tip, didn't know you could do that.