How to dynamically update a child combobox from pa

Question

I have a QML app that has two combo boxes, one is parent (country) combo box, other one is child (city) combo box. When selecting a country, the child combo box should have cities of the country at the same time.

I have a code that first combo box selects country but it doesn't set the list model of city's combo box. It sets after reopening the app.

import QtQuick 2.11
import QtQuick.Window 2.11
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.3
import Qt.labs.settings 1.0
ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    property alias comboBox: comboBox2
    Settings{
        property alias country : comboBox2.currentIndex
    }
    Dialog {
        id: dialog
        title: "Select Country"
        implicitWidth: parent.width
        implicitHeight: parent.height/2
        Column{
        ComboBox {
            id: comboBox2
            x: 199
            y: 176
            width: 277
            height: 48
            currentIndex: 0
            flat: false
            model: ["USA","Russia","Iran"]
        }
        }
    }
    ColumnLayout{
        anchors.horizontalCenter: parent.horizontalCenter
        spacing:20
        width: parent.width
    Button{
        anchors.horizontalCenter: parent.horizontalCenter
        id:select_country
        text:"select country"
        onClicked: dialog.open()
    }
    RowLayout{
        anchors.horizontalCenter: parent.horizontalCenter
        spacing:5
        width: parent.width
      Text {
         text:"Select City: "
       }
    ComboBox {
        id: comboBox1
        x: 199
        y: 176
        width: 277
        height: 48
        model: ListModel {
            id: model1
            dynamicRoles: true
            Component.onCompleted: {
                coord_combo()
                    }
            function coord_combo(){
                var i = comboBox1.currentIndex
                if (comboBox2.currentIndex===0){
                    comboBox1.model = ["New York","Washington","Houston"]
                    return comboBox1
                }
                else if (comboBox2.currentIndex === 1){
                    comboBox1.model = ["Moscow","Saint Petersburg","Novosibirsk"]

                    return comboBox1
                }
                else if (comboBox2.currentIndex === 2){
                    comboBox1.model = ["Tehran","Tabriz","Shiraz"]
                    return comboBox1
                }
            }
        }
    }
    }
    }
}

I used javascript functions to change Material QML Theme using combo box. But the same logic doesn't work for updating other combo box's list model. Is there any way to update the child combobox dynamically using qml and javascript?

Answer 1

You should use onCurrentIndexChanged signal in parent ComboBox and update the child whenever it is triggered. Something like this;

onCurrentIndexChanged:
{
    if(currentIndex === 0)
        comboBox1.model = ["New York", "Washington", "Houston"]
    ...
}

You can go further and write a function to get the cities of current country. Then you can update the model of child ComboBox whenever the currentIndex of parent ComboBox changes.