Unsolved 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 ?
-
@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") } } }
-
@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; } }