How do I assign a function to a DropDownList onChange in ScriptUI?

[Mark Paterson]

I'm pretty new to javascript and Script UI and need a little help joining a couple things I've learned together.

I'm trying to make a drop down list where the default value (Item 1) is not attached to a function (so it can be used as a title for the dropdown), but selecting a different item from the dropdown executes a function. Basic example here. This doesn't work BTW…

{
   function myScript(thisObj) {
      function myScript_buildUI(thisObj) {
                var myPanel = (thisObj instanceof Panel) ? thisObj : new Window("palette", "Panel Name", [0, 0, 300, 300]);

                res = "group{orientation:'column', alignment:['fill', 'fill'], alignChildren:['fill', 'fill'],\
                        myDropDownList: DropDownList{properties:{items:['Item 1', 'Item 2', 'Item 3', 'Item 4']}},\
                }"

                // Adds resource string to panel
                myPanel.grp = myPanel.add(res);

                // DropDownList default selection
                myPanel.grp.myDropDownList.selection = 0; /// Dropdown index starts at 0
                
                // Assign function to UI elements
                  if (myPanel.grp.myDropDownList.value == 1) function() {
			         alert ("ALERT 1")
                  }

                  else if (myPanel.grp.myDropDownList.value == 2) function() {
			         alert ("ALERT 2")
                  }

                  else if (myPanel.grp.myDropDownList.value == 3) function() {
			         alert ("ALERT 3")
                  }

                // Setup panel sizing and make panel resizable
                myPanel.layout.layout(true);
                myPanel.grp.minimumSize = myPanel.grp.size;
                myPanel.layout.resize();
                myPanel.onResizing = myPanel.onResize = function () {this.layout.resize();}

                return myPanel;
      }

      // Build script panel
      var myScriptPal = myScript_buildUI(thisObj);

      if ((myScriptPal != null) && (myScriptPal instanceof Window)) {
          myScriptPal.center();
          myScriptPal.show();
       }
   }

   // Execute script
   myScript(this);
}

I have tested the alert function with a simple button, so I know it works here…

        myPanel.grp.group2.alertTest.onClick = function() {
			alert ("ALERT 1")
        }

I think I basically need to say "if the value is equal to 1 then execute this function" but I'm unsure how to add that to the following line… (also I assume I need to add onChange and not onClick)

if (myPanel.grp.myDropDownList.value == 1)

[Nathan Lovell_52]

Just have to use it like this:

myPanel.grp.myDropDownList.onChange = function() {
    alert("ALERT 1");
}

If you want to check if the dropdown has changed, you need a variable to keep track of the index every time they change it. Then you can easily compare the tracking variable to the current selection.

var tracker = myPanel.grp.myDropDownList.selection.index;

myPanel.grp.myDropDownList.onChange = function() {
    if(tracker != myPanel.grp.myDropDownList.selection.index) {
         alert("YOU SELECTED A DIFFERENT DROPDOWN SELECTION");
}
    tracker = myPanel.grp.myDropDownList.selection.index;

}

Also side note, don't forget your semicolons (;). Forgetting lots of little things in javascript can add up to lots of later frustration.

[Mark Paterson]

Thanks! Very helpful. I added that code to my script and I see the alert each time I change it. However, what I'd like to do is trigger a unique alert for each item number (in truth, actually different commands but for simplicities sake here, separate alerts will suffice). How would I modify your code for that?

[Nathan Lovell_52 · Accepted solution]

Inside of the onChange = function() {}, you could simply do a switch statement for each of the dropdown values!

switch(myPanel.grp.myDropDownList.selection.index) {
    case 0:
        functionOne();
    break;
    case 1:
        functionTwo();
    break;
    case 2:
        functionThree();
    break;
    case 3:
        functionFour();
    break;
}

 Now you can have a case for as many dropdown values as you want! Each one can do something totally different, or similar to others!

[Mark Paterson]

Thanks so much!