Show/Hide content with multiple selection list

**mmalik** · 05-06-2009, 03:58 PM

Hi:

The following code works great to display content for drop-down list when the user selects only 1 item at a time.

The main problem - How could I change JavaScript to work if multiple items in the list are selected and then content is displayed for each list item chosen?

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 
<script type="text/javascript">
function showDivs(prefix,chooser) {
        for(var i=0;i<chooser.options.length;i++) {
                var div = document.getElementById(prefix+chooser.options[i].value);
                div.style.display = 'none';
        }
        var div = document.getElementById(prefix+chooser.value);
        div.style.display = 'inline';
}
window.onload=function() {
  document.getElementById('selectedOptions').value='0';//set value to your default
}
</script>
 
</head>
<body>

<table>
	<tr>
		<td><select size="4" multiple id="selectedOptions" onchange="showDivs('div',this)">
      <option value="0" selected>select</option>
      <option value="1">Cancelled request </option>
     <option value="2">Client hierarchy </option>
                  <option value="2">Missing, 
                  incorrect groups/contracts </option>
                  <option value="3">Clarify Comment Section 
                  </option>
                  <option value="4">Insufficent 
                  effective date/testing leadtime </option>
                  <option value="5">Other 
                  - (type in reason after dash) </option>
    </select><br>
      <strong>Catergory:</strong> <span id="div0" style="display:none;"></span>
<span id="div1" style="display:none;">Admin O/R</span>
<span id="div2" style="display:none;">Client Enrollment Info</span>
<span id="div3" style="display:none;">Requirements</span>
<span id="div4" style="display:none;">Validation Error</span>
<span id="div5" style="display:none;">Other</span>
</td>
	</tr>
</table>    
</body>
</html>

Appreciate help in advance.

Thanks

**vwphillips** · 05-06-2009, 05:52 PM

Code:

<script type="text/javascript">
function showDivs(prefix,chooser) {
        for(var ary=[],i=0;i<chooser.options.length;i++) {
                var div = document.getElementById(prefix+chooser.options[i].value);
                div.style.display ='none';
              if (chooser.options[i].selected) ary.push(chooser.options[i])

        }
 for (var div,z0=0;z0<ary.length;z0++){
  div=document.getElementById(prefix+ary[z0].value);
  if (div) div.style.display = 'inline';
 }
}
window.onload=function() {
  document.getElementById('selectedOptions').value='0';//set value to your default
}
</script>

**mmalik** · 05-07-2009, 05:32 PM

Thanks so much vwphillips for your help. It works perfectly

Thank again.

Take care

Thread: Show/Hide content with multiple selection list

Thread Tools

Search Thread

Show/Hide content with multiple selection list

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions