So here's what I am trying to do.
I have a form with two <select> fields: issue and subissue. The
second (subissue) is hidden by default. When the user selects one of
the items in the first (issue), I want to populate the second with
only certain options.
So I have all the options in the subissue <select> and it is set to
display: none. When the user selects an option in the issue <select>,
I pass the value to the processIssue function, which first hides all
the options in the subissue <select>. Then it builds out the name of
the array reference. ANd in theory, uses that to show certain options
(based on their ids in the arraty), and then unhide the <select>.
The problem is that when it hits the if block, itemsToShow is a
string, not the array reference.
Here is some of the relevant code as I have it:
<script type="text/javascript">
var myOptions = {
myOptions_group1: [ "group1_1", "group1_2", "group1_3", "group1_4" ],
myOptions_group2: [ "group2_1", "group2_2" ],
myOptions_group3: [ "group3_1", "group3_2" ]
}
function processIssue(sel) {
$$("#subissue>option").invoke("hide");
var itemsToShow = "myOptions." + sel;
if (itemsToShow) {
for (var i=0, l=itemsToShow.length; i<l; i++) {
$(itemsToShow[i]).style.display = '';
}
$("issueRefine").style.display = '';
}
}
</script>
<form>
<select name="issue" id="issue" onchange="processIssue(this.value)">
<option value="myOptions_group1">Group 1</option>
<option value="myOptions_group2">Group 2</option>
<option value="myOptions_group3">Group 3</option>
<option value="myOptions_group4">Group 4</option>
</select>
<select name="subissue" id="subissue">
<option id="group1_1">1_1</option>
<option id="group1_2">1_2</option>
<option id="group1_3">1_3</option>
<option id="group1_4">1_4</option>
<option id="group2_1">2_1</option>
<option id="group2_2">2_2</option>
<option id="group3_1">3_1</option>
<option id="group3_2">3_2</option>
</select>
</form>
If I change the processIssue function to this, it works great:
function processIssue(sel) {
$$("#subissue>option").invoke("hide");
if (sel == 'myOptions_group1') {
for (var i=0, l=myOptions.myOptions_group1.length; i<l; i++) {
$(myOptions.myOptions_group1[i]).style.display = '';
}
$("issueRefine").style.display = '';
}
else if (sel == 'myOptions_group2') {
for (var i=0, l=myOptions.myOptions_group2.length; i<l; i++) {
$(myOptions.myOptions_group2[i]).style.display = '';
}
$("issueRefine").style.display = '';
}
else if (sel == 'myOptions_group3') {
for (var i=0, l=myOptions.myOptions_group3.length; i<l; i++) {
$(myOptions.myOptions_group3[i]).style.display = '';
}
$("issueRefine").style.display = '';
}
else {
$("issueRefine").style.display = 'none';
}
}
I was hoping to avoid this however, as the list is going to be pretty
long and I wanted to reduce the amount of code.
Can anyone suggest a good way to do this? I will admit that I am not
the most proficient JS developer on the planet, but I usually have a
good understanding of things. Just not sure how I can build the
reference to the array object.
Would appreciate any assistance you could provide.
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
