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

Question

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 · Accepted Answer

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!

Nathan Lovell_52 · Answer

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded