1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 8:05 pm May 13, 2026

Forum Moderators: open

Message Too Old, No Replies

Text change on repeated drop-down lists

         

wren237

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

10+ Year Member



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

2:45 pm on Mar 9, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

4:05 pm on Mar 9, 2012 (gmt 0)

10+ Year Member



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

nyteshade

6:33 pm on Mar 9, 2012 (gmt 0)

10+ Year Member



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

7:12 pm on Mar 9, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month




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

6:48 pm on Mar 12, 2012 (gmt 0)

10+ Year Member



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

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 8:05 pm May 13, 2026