Menu
I have two scripts I need to use in one page. One script I received from these forums and another I found online.
They both depend on what is selected from an option select menu from a form. One hides/displays content related to the selection at a different part of the screen, and the other changes the available options of other option selections.
They both work great independently, but when combined and placed in the head, only the control over other option selections remains.
I’m guessing there is some conflict, but I haven’t been able to figure out exactly what it is, and how to fix it.
Thank you so much for any help.
[code=html]<script type=”text/javascript”>
function showSelection () {
var e, i = 0;
while (e = document.getElementById (‘sel1’).options [i++]) {
document.getElementById (e.value).className = ‘hide’
}
document.getElementById (document.getElementById (‘sel1’).options [document.getElementById (‘sel1’).selectedIndex].value).className = ”;
}
if (document.getElementById) onload = function () {
showSelection ();
document.getElementById (‘sel1’).onchange = showSelection;
}
</script>
<script type=”text/javascript”>
function dynamicSelect(id1, id2) {
if (document.getElementById && document.getElementsByTagName) {
var sel1 = document.getElementById(id1);
var sel2 = document.getElementById(id2);
var clone = sel2.cloneNode(true);
var clonedOptions = clone.getElementsByTagName(“option”);
refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
sel1.onchange = function() {
refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
};
}
}
function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) {
while (sel2.options.length) {
sel2.remove(0);
}
var pattern1 = /( |^)(select)( |$)/;
var pattern2 = new RegExp(“( |^)(” + sel1.options[sel1.selectedIndex].value + “)( |$)”);
for (var i = 0; i < clonedOptions.length; i++) {
if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)) {
sel2.appendChild(clonedOptions[i].cloneNode(true));
}
}
}
</script>
<script type=”text/javascript”>
window.onload = function() {
dynamicSelect(“sel1”, “sel2”);
dynamicSelect(“sel2”, “sel3”);
dynamicSelect(“sel3”, “sel4”);
}
</script>