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