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 prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en.

Reply via email to