6 Replies Latest reply on Feb 3, 2014 6:15 AM by Americo Pinto

    dropdownlist used onchange of an another dropdownlist

    Americo Pinto Level 1

      Hi everyody,

       

      I try to select my way by using two dropdownlist.

      Each item on the first list change the second dropdownlist

       

      example

       

      List A                              List B               List C               List D  etc..

      ItemA1  -> call ListB     ItemB1               ItemC1

      ItemA2  -> call ListC     ItemB2               ItemC2

      itemA3  -> call ListD     ItemB3               ItemC3

      itemA4  -> call ListE     ItemB4               ItemC4              

       

      I scripted like this :

       

      var myList0= ["ItemA1", "ItemA2", "ItemA3", "ItemA4"];

      var myListA = ["ItemB1", "ItemB2", "ItemB3", "ItemB4"];

      var myListB = etc ....

       

      var columns = myOption2.add("group");

      var dimC = [0, 0, 100, 50];

      var col1 = columns .add('dropdownlist', dimC , myList0);

      col1.onChange = function()

      {

           if (col1.selection == 0)

                {

                     var col2 = columns .add('dropdownlist', dimC, myListA);

                     return col2;

                }

           else if (col1.selection == 1)

                {

                     var col2 = columns .add('dropdownlist', dimC, myListB);

                }

           etc ....

      }

       

      finally, it happens that my second dropdownlist overlap the first, and i want it separately.

       

      Please, if anyone have an idea ?

       

      best regards

       

      Américo

        • 1. Re: dropdownlist used onchange of an another dropdownlist
          Marc Autret Level 4

          Hi Américo,

           

          Two suggestions:

          • Have your data structure as abstract as possible, and keep it independent from the UI.

          • Do not hardcode the bounds of your controls (as this inhibits the auto layout mechanism).

           

          Here is a generic template to 'link' two dropdownlist. In my code I use an associative array of arrays to represent your data:

           

          const MIN_DD_SIZE = [100, 50];
          
          var data = {
              'Item1 (B)' : ['ItemB1', 'ItemB2', 'ItemB3', 'ItemB4' /*...*/],
              'Item2 (C)' : ['ItemC1', 'ItemC2', 'ItemC3' /*...*/],
              'Item3 (D)' : ['ItemD1', 'ItemD2', 'ItemD3', 'ItemD4', 'ItemD5' /*...*/],
              // etc.
              };
          
          var keys = [], z = 0,
              w, g, col1, col2;
          
          // Feed keys (= col1 strings)
          // ---
          for( keys[z++] in data );
          
          // Create the UI
          // ---
          w = new Window('dialog',"Test");
          (g = w.add('group')).orientation = 'row';
          (col1 = g.add('dropdownlist', undefined, keys)).minimumSize = MIN_DD_SIZE;
          (col2 = g.add('dropdownlist')).minimumSize = MIN_DD_SIZE;
          col1.proxy = col2;
          
          // Change item event
          // ---
          col1.onChange = function()
          {
              var dd = this.proxy,
                  t, a, i;
          
              dd.items.length && dd.removeAll();
              if( !(t=this.selection) ) return;
              for( a=data[t.text],t=a.length,i=0 ; i < t ; dd.add('item',a[i++]) );
              t && (dd.selection=a[0]);
          };
          
          // Init. & Go
          // ---
          col1.selection = keys[0];
          col1.onChange();
          w.show();
          

           

           

          Hope that helps.

          @+

          Marc

          • 2. Re: dropdownlist used onchange of an another dropdownlist
            Americo Pinto Level 1

            Hi Marc,

             

            Thanks a lot ! It works well and better than I could hope.

             

            Best Regards.

             

            Américo

             

            PS : are you french ?

            • 3. Re: dropdownlist used onchange of an another dropdownlist
              Marc Autret Level 4

              > are you French?

               

              Well, I have many other defects but, yes, I'm French.

               

              ;-)

              Marc

              • 4. Re: dropdownlist used onchange of an another dropdownlist
                Americo Pinto Level 1

                No offens, nobody's perfect, and I share the same DNA error code .

                 

                Please one more question, i'll get the first and the second onChange results as variables, how could I do this on your code.

                 

                As you can see I'm not powerfull in scripting.

                 

                Best regards.

                 

                Américo

                • 5. Re: dropdownlist used onchange of an another dropdownlist
                  Marc Autret Level 4

                  > i'll get the first and the second onChange results as variables, how could I do this on your code

                   

                  Not sure I understand your question. Do you mean that you need the newly selected list item to be stored in a variable?

                  Within a List.onChange callback the selected ListItem is referred to by this.selection You can then use either ListItem's index or text property to process the data.

                   

                  @+

                  Marc

                  • 6. Re: dropdownlist used onchange of an another dropdownlist
                    Americo Pinto Level 1

                    Hi Marc,

                     

                    i'm very sorry. Finally i find it by myself. You're explaination is well but i don't write the command lines in the right place.

                     

                    Thank you for time.

                     

                    Américo