Posts: 65
Location: san francisco, ca
|
i've gotten *so* far using some very helpful & well-defined JS hints & tricks from this site. now its my turn to post a question for a challenge that has me stumped.
BIZ & FUNCTIONAL REQUIREMENTS I NEED TO FULFILL:- I need multiple select-lists, where name is mapped to a DB field.
- Each option in each list needs a numeric value 1-9 (which a type-table will define in the DB, not my dept)
- Each option value needs to trigger a div SHOW containing a script that describes that lists option value, which will also HIDE the current div/script.
- Per requirements, i must build this using select-lists.
PROGRESS & SUCCESS
Using JS + CSS found on this site, I've successfully gotten the appropriate div to show/hide.
MY PROBLEM:
The only way i have found this to work is if the div id = the option value. Which means all value-to-id combos must be unique.
However, I need my option values to remain non-unique (multiple lists with identical value ranges).
Is there a way to acheive this? Using the following JS or any other JS?
DUMMY/TEST CODE DEMONSTRATING MY SCENARIO:
Each list does trigger a SHOW/HIDE of a script div. However, since the div id's are not unique, only the first set if option value ranges are listening to the trigger(s).
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST PAGE</title>
<script type="text/javascript"><!--
var lastDiv = "";
function showDiv(divName) {
// hide last div
if (lastDiv) {
document.getElementById(lastDiv).className = "hiddenDiv";
}
//if value of the box is not nothing and an object with that name exists, then change the class
if (divName && document.getElementById(divName)) {
document.getElementById(divName).className = "visibleDiv";
lastDiv = divName;
}
}
//-->
</script>
<style type="text/css" media="screen">
<!--
.hiddenDiv {
display: none;
}
.visibleDiv {
display: block;
border: 1px grey solid;
}
-->
</style>
</head>
<body>
<form name="script_display" method="post" action="">
<table cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<!-- ===== START select-list column START ===== -->
<td width="300" valign="top">
LIST A
<select name="selectlista" onchange="showDiv(this.value);">
<option value="">Select</option>
<option value="1">Display Script A1 </option>
<option value="2">Display Script A2 </option>
<option value="3">Display Script A3 </option>
</select>
<p>
LIST B
<select name="selectlistb" onchange="showDiv(this.value);">
<option value="">Select</option>
<option value="1">Display Script B1 </option>
<option value="2">Display Script B2 </option>
<option value="3">Display Script B3 </option>
</select>
<p>
LIST C
<select name="selectlistc" onchange="showDiv(this.value);">
<option value="">Select</option>
<option value="1">Display Script C1 </option>
<option value="2">Display Script C2 </option>
<option value="3">Display Script C3 </option>
</select>
</td>
<!-- ===== END select-list column END ===== -->
<!-- ===== START script column START ===== -->
<td width="300" valign="top">
<div id="1" class="hiddenDiv"><strong>This is script A1.</strong><br /> This script should only display whilst option "Display Script A1" is selected in list A</div>
<div id="2" class="hiddenDiv"><strong>This is script A2.</strong><br /> This script should only display whilst option "Display Script A2" is selected in list A</div>
<div id="3" class="hiddenDiv"><strong>This is script A3.</strong><br /> This script should only display whilst option "Display Script A3" is selected in list A</div>
<div id="1" class="hiddenDiv"><strong>This is script B1.</strong><br /> This script should only display whilst option "Display Script B1" is selected in list B</div>
<div id="2" class="hiddenDiv"><strong>This is script B2.</strong><br /> This script should only display whilst option "Display Script B2" is selected in list B</div>
<div id="3" class="hiddenDiv"><strong>This is script B3.</strong><br /> This script should only display whilst option "Display Script B3" is selected in list B</div>
<div id="1" class="hiddenDiv"><strong>This is script C1.</strong><br /> This script should only display whilst option "Display Script C1" is selected in list C</div>
<div id="2" class="hiddenDiv"><strong>This is script C2.</strong><br /> This script should only display whilst option "Display Script C2" is selected in list C</div>
<div id="3" class="hiddenDiv"><strong>This is script C3.</strong><br /> This script should only display whilst option "Display Script C3" is selected in list C</div>
</td>
<!-- ===== END script column END ===== -->
</tr>
</table>
</form>
</body>
</html>
|
