homepage Welcome to WebmasterWorld Guest from 54.161.185.244
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Text change on repeated drop-down lists
wren237



 
Msg#: 4426936 posted 11:59 am on Mar 9, 2012 (gmt 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>

 

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4426936 posted 2:45 pm on Mar 9, 2012 (gmt 0)

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.

wren237



 
Msg#: 4426936 posted 4:05 pm on Mar 9, 2012 (gmt 0)

Thank you so much! This was exactly what I needed; it works beautifully. And extra thanks for the helpful hints :-)

nyteshade



 
Msg#: 4426936 posted 6:33 pm on Mar 9, 2012 (gmt 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!

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4426936 posted 7:12 pm on Mar 9, 2012 (gmt 0)


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]

nyteshade



 
Msg#: 4426936 posted 6:48 pm on Mar 12, 2012 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved