Combobox properties



  • I am building my first application and I want to have a combobox with certain options in it; when 1 of these options are selected, I want another combobox to be populated with certain options. Moreover if the user selects the second option in the first combobox, then the second gets populated with different options. Is this possible? I have been fooling around with it for a while and can't seem to find out how to do it.



  • Is possible, but first you need to tell us if you are using QML or QWidgets. For both is the same process, first you need to create 2 lists of options, for both comboboxes, and implement the populate functions for them.



  • @BrunoGeorgevich I am using QWidget and my comboboxes are nested withing that.



  • @Sagebrushwilly so, you will need to create 2 slots and connect them to the signals emmited from the combobox when a option is clicked. In the slots you will do the data treatment, using if/else or switch, and remove and insert the list of options to the combobox.The signal who observer which item was clicked in a combobox is this: http://doc.qt.io/qt-4.8/qcombobox.html#activated
    This signal emmit an int who is the index of the item clicked.



  • I am editing these through my .ui file , and keep in mind I am exceptionally new to this, so I know next to nothing. I have been editing all attributes through the design tab and that seems to be the easiest for me so far.



  • @Sagebrushwilly i propose to you, before you continue your project, to read more about signals and slots, a good link to learn more about it is: http://doc.qt.io/qt-4.8/signalsandslots.html .I don't know other way to do this without using signals and slots.



  • I'll take a look. Thank you



  • @Sagebrushwilly you welcome. I'm glad to help.



  • @Sagebrushwilly said in Combobox properties:

    I am building my first application and I want to have a combobox with certain options in it; when 1 of these options are selected, I want another combobox to be populated with certain options. Moreover if the user selects the second option in the first combobox, then the second gets populated with different options. Is this possible?

    I am facing the same challenge but my goal is to implement it in qml, any ideas ?
    0_1540192094714_combox.gif


  • Moderators

    @Levis You can use this signal: http://doc.qt.io/qt-5/qml-qtquick-controls-combobox.html#activated-signal
    When it is triggered fill the next one with data.



  • @jsulm thanks for the hint, I am trying it out...



  • I read about the signal but I am not able to pass the signal from one combobox to the other. Below is my code.

    //main qml
    import QtQuick 2.7
    import QtQuick.Controls 2.0
    import QtQuick.Layouts 1.3
    import QtQuick.Controls.Material 2.2
    
    ApplicationWindow {
        id: rootWindow
        visible: true
        width: 1000
        height: 800
        title: qsTr("Hello World!")
    
        ComboBox{
            id: country
            model: ["USA", "India"]
            onActivated: {
                console.debug("CombBox.onActivated", index)
                console.assert(currentIndex == index, "Assertion failed: property currentIndex not equal to actual parameter index")
            }
        }
        ComboBox{
            id: state
            model: ["California", "Assam"]
            onActivated: {
                console.debug("CombBox.onActivated", index)
                console.assert(currentIndex == index, "Assertion failed: property currentIndex not equal to actual parameter index")
            }
        }
        ComboBox{
            id: city
            model: ["Los Angeles", "Dispur"]
            onActivated: {
                console.debug("CombBox.onActivated", index)
                console.assert(currentIndex == index, "Assertion failed: property currentIndex not equal to actual parameter index")
            }
        }
        ComboBox{
            id: zip
            model: ["90001", "781005"]
            onActivated: {
                console.debug("CombBox.onActivated", index)
                console.assert(currentIndex == index, "Assertion failed: property currentIndex not equal to actual parameter index")
            }
        }
    }
    

  • Moderators

    @Levis said in Combobox properties:

    but I am not able to pass the signal from one combobox to the other

    You don't pass the signal to anywhere. In the slot (in onActivated) you change the entries in the next combo box using its id (I'm not a QML expert, so I will not provide an example).



  • @jsulm thanks a lot for such a nice read and this code did the charm

    //main qml
    import QtQuick 2.7
    import QtQuick.Controls 2.0
    import QtQuick.Layouts 1.3
    import QtQuick.Window 2.3
    import QtQuick.Controls.Material 2.2
    
    Window {
        visible: true
        width: 640
        height: 480
    
        property var countryStateInfo: {
            "USA": {
                "California": {
                    "Los Angeles": ["90001", "90002", "90003", "90004"],
                    "San Diego": ["92093", "92101"]
                },
                "Texas": {
                    "Dallas": ["75201", "75202"],
                    "Austin": ["73301", "73344"]
                }
            },
            "India": {
                "Assam": {
                    "Dispur": ["781005"],
                    "Guwahati" : ["781030", "781030"]
                },
                "Gujarat": {
                    "Vadodara" : ["390011", "390020"],
                    "Surat" : ["395006", "395002"]
                }
            }
        }
    
        ColumnLayout {
            anchors.centerIn: parent
            ComboBox {
                id: box1
                currentIndex: -1
                model: getData(countryStateInfo)
            }
            ComboBox {
                id: box2
                model: box1.currentIndex < 0 ? [] : getData(countryStateInfo[box1.displayText])
                onModelChanged: currentIndex = -1
            }
            ComboBox {
                id: box3
                model: box2.currentIndex < 0 ? [] : getData(countryStateInfo[box1.displayText][box2.displayText])
                onModelChanged: currentIndex = -1
            }
            ComboBox {
                id: box4
                model: box3.currentIndex < 0 ? [] : countryStateInfo[box1.displayText][box2.displayText][box3.displayText]
                onModelChanged: currentIndex = -1
            }
        }
    
        function getData(arr)
        {
            var retval = [];
            for(var element in arr)
            {
                retval.push(element)
            }
            return retval;
        }
    }
    
    
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.