多选QML组合框

Question

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.

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")
        }
    }
}

Any idea on how to pass these signals will be highly appreciated

Answer 1

I would do that in the same way as in javascript:

import QtQuick 2.11
import QtQuick.Window 2.11
import QtQuick.Layouts 1.11
import QtQuick.Controls 2.4

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;
    }
}

Perhaps this code will require some refactoring, I just don't know how to use an associative array as a model