Get listbox into textbox

Hi, I want to get values from listbox to insert textbox by adding sentence.:

I have cities in listbox(milano, atina, istanbul, amsterdam)

When I choose amsterdam, sholud be shown in the textbox "Selected city is Amsterdam"

Next I choose milano, sholud be shown in the textbox "Selected cities is Amsterdam, Milano"

Next I choose istanbul, sholud be shown in the textbox "Selected cities is Amsterdam, Milano, İstanbul"

I try but I only know "string" and "value" command so I can't solve how to add directly string text and adding to each other. thanks for interest.

city=get(handles.listbox1,'string');
set(handles.edit1,'string',city);

Answer 1

[Dave B]

Here's the modern uifigure/appdesigner style way:

u = uifigure;
lst = uilistbox(u, 'Multiselect', true, 'Position', [50 50 100 300], 'Items', ["Amsterdam" "Milano" "Istanbul" "Natick"]);
txt = uieditfield(u, 'Position', [175 325 300 25]);
lst.ValueChangedFcn = @(~,~)set(txt, 'Value', "Selected cities are: " + string(join(lst.Value,', ')));

Here's the classic figure/guide/uicontrol style way:

f = figure;
lst = uicontrol(f, 'Style','listbox', 'Max',2, 'Position', [50 50 100 300], 'String', ["Amsterdam" "Milano" "Istanbul" "Natick"]);
txt = uicontrol(f, 'Style', 'edit', 'Position', [175 325 300 25]);
lst.Callback = @(~,~)set(txt,'String', "Selected cities are: " + join(lst.String(lst.Value),', '));

The bit you're looking for is the same, you can use join (or strjoin if you prefer).

[Zafer Sahin]

Thank you for answer, these codes work correctly, but I want accumulate cities names. These codes only show selected cities. For example:

I select istanbul shown: " Select cities are Istanbul"

after I select Milano shown "Selected cities are Istanbul, Milano(not only Milano)"

Maybe using "Add" button it could be easier. Thank you.

[Dave B]

Ah I think you mean that you want to keep track of the existing names on each click rather than allowing the user to select multiple names?

I'd suggest you store the names somewhere other than the string in the textbox, but it's not really essential:

u = uifigure;
lst = uilistbox(u, 'Position', [50 50 100 300], 'Items', ["Amsterdam" "Milano" "Istanbul" "Natick"]);
txt = uieditfield(u, 'Position', [175 325 300 25], 'Value', "Selected cities are: ");

lst.ValueChangedFcn = @(~,~)updatestring(lst,txt);

function updatestring(lst,txt)
    if txt.Value=="Selected cities are: "
        txt.Value = txt.Value + string(lst.Value);
    else
        txt.Value = txt.Value + ", " + string(lst.Value);
    end
end

What should happen if the user clicks the same element twice? should it appear twice? If you make an app in app designer (or just a class for this app) then you can just make a private property to hold the selected cities, this gives you a place to take the unique values and set the string. Here's what the app's code view might look like after adding in the property and callbacks (note that most of this is auto-generated by App Designer, I just filled in the ListBoxValueChanged method and the SelectedCities property):

classdef app1 < matlab.apps.AppBase

    % Properties that correspond to app components
    properties (Access = public)
        UIFigure        matlab.ui.Figure
        ListBox         matlab.ui.control.ListBox
        ListBoxLabel    matlab.ui.control.Label
        EditField       matlab.ui.control.EditField
        EditFieldLabel  matlab.ui.control.Label
    end

    
    properties (Access = private)
        SelectedCities (:,1) string
    end
    

    % Callbacks that handle component events
    methods (Access = private)

        % Value changed function: ListBox
        function ListBoxValueChanged(app, event)
            value = app.ListBox.Value;
            app.SelectedCities = unique([app.SelectedCities; string(value)]);
            app.EditField.Value = "Selected cities are: " + app.SelectedCities.join(", ");
        end
    end

    % Component initialization
    methods (Access = private)

        % Create UIFigure and components
        function createComponents(app)

            % Create UIFigure and hide until all components are created
            app.UIFigure = uifigure('Visible', 'off');
            app.UIFigure.Position = [100 100 640 480];
            app.UIFigure.Name = 'MATLAB App';

            % Create EditFieldLabel
            app.EditFieldLabel = uilabel(app.UIFigure);
            app.EditFieldLabel.HorizontalAlignment = 'right';
            app.EditFieldLabel.Position = [198 426 56 22];
            app.EditFieldLabel.Text = 'Edit Field';

            % Create EditField
            app.EditField = uieditfield(app.UIFigure, 'text');
            app.EditField.Position = [269 426 358 22];

            % Create ListBoxLabel
            app.ListBoxLabel = uilabel(app.UIFigure);
            app.ListBoxLabel.HorizontalAlignment = 'right';
            app.ListBoxLabel.Position = [27 426 48 22];
            app.ListBoxLabel.Text = 'List Box';

            % Create ListBox
            app.ListBox = uilistbox(app.UIFigure);
            app.ListBox.Items = {'Amsterdam', 'Milan', 'Istanbul', 'Natick'};
            app.ListBox.ValueChangedFcn = createCallbackFcn(app, @ListBoxValueChanged, true);
            app.ListBox.Position = [90 376 100 74];
            app.ListBox.Value = 'Amsterdam';

            % Show the figure after all components are created
            app.UIFigure.Visible = 'on';
        end
    end

    % App creation and deletion
    methods (Access = public)

        % Construct app
        function app = app1

            % Create UIFigure and components
            createComponents(app)

            % Register the app with App Designer
            registerApp(app, app.UIFigure)

            if nargout == 0
                clear app
            end
        end

        % Code that executes before app deletion
        function delete(app)

            % Delete UIFigure when app is deleted
            delete(app.UIFigure)
        end
    end
end

[Zafer Sahin]

Yes, I mean keep of previous names as you said. This codes work perfect.

I wonder how I use app designer codes which you wrote, since I cant use directy copy/paste to code window. When I try, It gives error as a "Class name and filename must match".

Also I cant edit app designer code view menu. Thanks for helps.

[Dave B]

Yeah I can see how that would be confusing. I'm guessing you might run into other problems if you made the class name and filename match (the class name is the app1 bit right after classdef, and the filename is...well...the name of the file that you save it as). I was thinking you'd be making this in App Designer.

I included what all of my App Designer code looked like, but most of it was autogenerated and not editable.

The steps would look like:

• Create an app in App Designer
• Add ListBox and EditField components interactively in the Design View
• Switch to Code View
• Look for the 'Code Browser', select 'Callbacks' and hit the + (or click Callback in the toolstrip)
• Choose the ListBox component (or whatever you named the ListBox)
• (you can give your callback function a custom name if you like) Click Add Callback
• Now you can edit code for the callback, this is where you'd add the stuff in my ListBoxValueChanged above
• Back in Code Browser, click Properties and then the + (or click Property in the toolstrip), this will add a new private property.
• You can name it how you like (I chose SelectedCities), and you can also constrain the shape and type as I did (up to you!)

Sorry that looks like a lot of steps, but it really only takes like 30 seconds when you've done this kind of thing before!