PDA

View Full Version : Resolved 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?

:confused:



<!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
<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