How to make two drop down Dependent

I have two drop down on my App Designer app, like this:

DropDown1.Items = {'1','2','3','4','5'};

DropDown1.ItemsData = [1,2,3,4,5];

DropDown2.Items = {'10','20','30','40','50'};

DropDown2.ItemsData = [1,2,3,4,5];

I would like to make this drop down dependent, so, if I choose on the DropDown1 the second option ({'2'}), the DropDown2 display the same position option (the second {'20'}) and so on any position I choose.

Is there any way to make this on App Designer or GUI?

[Geoff Hayes]

Adrian - you can probably do something in the callback for the first drop down: when this fires (due to a change in the choice), then update the selected value in the second drop down.

[Adrian Quesada]

That is what I need, but I don't know how to do it.

Answer 1

[Luna]

Here is a basic test app I have created.

Please read comments carefully.

classdef testDropDown < handle
  
    properties
        dd1 % will be used for dropdown1 handle
        dd2 % will be used for dropdown2 handle       
    end
    
    methods        
        function obj = testDropDown(obj)  % obj is testDropDown obj whose superclasses is handle class 
            hFig = figure;
            %% dropdown1 assigned as a property for testDropDown Class
            obj.dd1 = uicontrol('Parent',hFig,'Style','popupmenu','Units','normalized','Position',[0.1 0.3 0.5 0.1],'Callback',@obj.dd1Callback,'String',{'1','2','3'});
            %% dropdown2 assigned as a property for testDropDown Class
            obj.dd2 = uicontrol('Parent',hFig,'Style','popupmenu','Units','normalized','Position',[0.1 0.1 0.5 0.1],'Callback',@obj.dd2Callback,'String',{'10','20','30'});
        end
        
        function dd1Callback(obj,src,evnt) % when clicked on dropdown1 this callback will be executed.
            obj.dd2.Value = src.Value;  % gets the value of the source(src) which is the object handle of the item that you have clicked on and assignes it to the other dropdown's value. 
        end
        
        function dd2Callback(obj,src,evnt) % when clicked on dropdown2 this callback will be executed.
          % obj is the main class object
          % src is the source of that callback executed it can be a button or a dropdown menu item,etc.
          % evnt is the event handle that stores the clicking event.
           
        end
    end
end

Read more about handle classes you can find lots of information.

[Luna]

I have created a manuel classdef, If you are using app designer, the classes must be already defined. You can reach your all uicontrol elements' object instances via handles dot notation inside any callback. For example:

    % Value changed function: DropDown
    function DropDownValueChanged(app, event)  % first dropdown's callback
            idx = ismember(app.DropDown.Items,event.Value);
            app.DropDown2.Value = app.DropDown2.Items(idx);
    end

Below you can see the classdef for automatically generated appdesigner code:

    classdef app1 < matlab.apps.AppBase

    % Properties that correspond to app components
    properties (Access = public)
        UIFigure        matlab.ui.Figure
        DropDownLabel   matlab.ui.control.Label
        DropDown        matlab.ui.control.DropDown
        DropDown2Label  matlab.ui.control.Label
        DropDown2       matlab.ui.control.DropDown
    end

    methods (Access = private)

        % Value changed function: DropDown
        function DropDownValueChanged(app, event)
            idx = ismember(app.DropDown.Items,event.Value);
            app.DropDown2.Value = app.DropDown2.Items(idx);
        end
    end
.
.
.

Also I recommend to check below links:

Write Callbacks in App Designer

Share Data Within App Designer Apps

[Adrian Quesada]

Thank you very much for the answer and the patience to explain it step by step.

[Luna]

Your welcome :)