T.J.,

Thanks so much for the reply.  I completely blanked on that way of
referencing it, and appreciate you filling me in on it.  That worked
perfectly for me.


On Apr 11, 12:16 am, "T.J. Crowder" <[email protected]> wrote:
> Hi,
>
> You can reference a property of an object using a string key and
> square brackets, so this:
>
>     var itemsToShow = "myOptions." + sel;
>
> should be:
>
>     var itemsToShow = myOptions[sel];
>
> ...assuming that `sel` contains a string like "myOptions_group1", as
> it appears to from the if/else structure you said works.
>
> This is one of the more powerful features of JavaScript syntax, this
> ability to reference a property by symbol:
>
>     x = myOptions.myOptions_group1;
>
> ...or by string, either a string literal:
>
>     x = myOptions["myOptions_group1"];
>
> ...or a string in a variable:
>
>     s = "myOptions_group1";
>     x = myOptions[s];
>
> ...since of course those are the same thing as far as the [] operator
> is concerned.
>
> HTH,
> --
> T.J. Crowder
> Independent Software Consultant
> tj / crowder software / comwww.crowdersoftware.com
>
> On Apr 9, 2:56 am, thegdog <[email protected]> wrote:
>
> > 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.

Reply via email to