changing combobox index when selection of another combobox is changed

koahnig

Basically I have 2 comboboxes in qml. When the first combobox is changing to a specific value a second combobox has to be adjusted. I tried to use a function and check a number of different comboboxes and try to make the adjustment, but that fails.

Is there somewhere an example, I could not find yet?

Shrinidhi Upadhyaya

Hi @koahnig , i did not get it completely:-

are you facing a problem to fetch the value of the first combo box?
or do you want to know whether the currentIndex of the first combo box has changed?
3.or do you want to change the value of the second combo box, when you click on the first combo box and hover over the values to change.

J.Hilk

@koahnig

you mean like this ?

import QtQuick 2.12
import QtQuick.Controls 2.5

ApplicationWindow {
  visible:true
  width:500; height:500


    ComboBox {
      id: box1
      anchors.left: parent.left
      anchors.right: parent.right
      anchors.top:parent.top
      height: parent.height /2

      model: ["0","1", "2", "3", "4"]
      onCurrentIndexChanged: box2.currentIndex = currentIndex
    }

    ComboBox {
      id: box2
      anchors.left: parent.left
      anchors.right: parent.right
      anchors.top:box1.bottom
      height: parent.height /2

      model: [10,11,12,13,14]

      onCurrentIndexChanged: box1.currentIndex = currentIndex
    }
}

koahnig

@Shrinidhi-Upadhyaya

ComboBox {
                        id:sol0types
                        currentIndex: 2
                        model: [ "1", "5", "1/5", "IF" ]
                        width: parent.width*rect3.myTypScale
                        height: rect3.myHeight
                        onCurrentTextChanged: {
                            settings3.colorButton() 
                        }
                    }
                    ComboBox {
                        id: sol0allonly
                        currentIndex: 0
                        font.pointSize: 13
                        model: [ "all", "only" ]
                        width: parent.width*rect3.myAllScale
                        height: rect3.myHeight
                        onCurrentTextChanged: {settings3.colorButton()
                            settings3.checkSettings() }
                    }

Those are my comboboxes when the first "id:sol0types" is changed to "IF", the second needs to be changed to "only".
checkSettings does not do the job.

Below is the checkSettings function

                function checkSettings()
                {
                    console.log( "checkSettings" )
                    console.log(sol0types.currentText, " sol0 index ", sol0allonly.currentIndex )
                    if ( sol0types.currentText == "IF" )
                    {
                        sol0allonly.currentIndex = 2
                    }
                    if ( sol1types.currentText == "IF" )
                    {
                        sol1allonly.currentIndex = 1
                    }
                    if ( sol2types.currentText == "IF" )
                    {
                        sol2allonly.currentIndex = 1
                    }
                    if ( sol3types.currentText == "IF" )
                    {
                        sol3allonly.currentIndex = 1
                    }
                }

J.Hilk

@koahnig

adjusting my crude example to your actual code:

ComboBox {
                        id:sol0types
                        currentIndex: 2
                        model: [ "1", "5", "1/5", "IF" ]
                        width: parent.width*rect3.myTypScale
                        height: rect3.myHeight
                        onCurrentTextChanged: {
                            settings3.colorButton() 
                        }
                       onCurrentIndexChanged: {
                          if( currentIndex == 3 )   
                               sol0allonly.currentIndex = 1
                       }
                    }

right ?

J.Hilk

@koahnig

I think your logic isn't quite right, if the 2nd ComboBox should change when the first one is set to IF, shouldn't you be calling setting in the text changed signal of the first combobox ?

You currently only call it in the 2nd and that should change.

and you're settings the current index to sol0allonly.currentIndex = 2 when it only has 2 entries in the model

ApplicationWindow {
  visible:true
  width:500; height:500


    ComboBox {
        id:sol0types
        currentIndex: 2
        model: [ "1", "5", "1/5", "IF" ]
        width: parent.width
        height: parent.height /2
        onCurrentTextChanged: {
            console.log("sol0types changed", currentText)
            sol0allonly.checkSettings()
        }
    }

    ComboBox {
        id: sol0allonly
        currentIndex: 0
        font.pointSize: 13
        model: [ "all", "only" ]
        width: parent.width
        height: parent.height /2
        y:parent.height/2
        onCurrentTextChanged: {
            checkSettings()
        }

        function checkSettings(){
            console.log( "checkSettings" )
            console.log(sol0types.currentText, " sol0 index ", sol0allonly.currentIndex )
            if ( sol0types.currentText === "IF" )
            {
                sol0allonly.currentIndex = 1
            }

        }
    }
}

koahnig

@J.Hilk

Sorry, was changing code based on your example.

                        onCurrentTextChanged: {
                            settings3.colorButton() 
                            sol0allonly.currentIndex = currentIndex == 3 ? 1 : sol0allonly.currentIndex
                        }

That is working.
I'll change to your version. Elegance of code is not my main focus at the moment ;)

I am checking with the other combobox at the moment. I shall go back to only. That is not working yet.

koahnig

@J.Hilk said in changing combobox index when selection of another combobox is changed:

@koahnig

I think your logic isn't quite right, if the 2nd ComboBox should change when the first one is set to IF, shouldn't you be calling setting in the text changed signal of the first combobox ?

You currently only call it in the 2nd and that should change.

and you're settings the current index to sol0allonly.currentIndex = 2 when it only has 2 entries in the model

That was a leftover from my desperate trials.

Probably a really stupid question: Why do I need "===" and not "==" ?
It complained before to change to "===" but I had basically forgotten to use also .currentText
Not sure if there was an update issue with all that. But I think I had covered what does work now. In the mean time creator crashed and the new session may have helped magically.

And I love C++!!!

My solution is now:

                    ComboBox {
                        id:sol0types
                        currentIndex: 2
                        model: [ "1", "5", "1/5", "IF" ]
                        width: parent.width*rect3.myTypScale
                        height: rect3.myHeight
                        onCurrentTextChanged: {
                            settings3.colorButton() 
                            if ( currentIndex == 3 )
                                sol0allonly.currentIndex = 1
                        }
                    }
                    ComboBox {
                        id: sol0allonly
                        currentIndex: 0
                        font.pointSize: 13
                        model: [ "all", "only" ]
                        width: parent.width*rect3.myAllScale
                        height: rect3.myHeight
                        onCurrentTextChanged: {
                            settings3.colorButton()
                        }
                        onCurrentIndexChanged: {
                            if ( sol0types.currentIndex == 3 )
                                currentIndex = 1
                        }
                    }

That is working HURRAY!!

The problem is also that the debugger is not working with the Android level on my two phones.

Thanks to all for your suggestions.

J.Hilk

@koahnig said in changing combobox index when selection of another combobox is changed:

Probably a really stupid question: Why do I need "===" and not "==" ?

Because you want to be really really sure that they are equal x)

No, JavaScript does conversion checks as well

"1" == 1 -> true
"1" === 1 -> false

And I love C++!!!

hear,hear!