Auto Select the dropdown value based on the item selected in another dropdown

1 Answer 156 Views
DropDownList
Abhishek
Top achievements
Rank 2
Iron
Iron
Iron
Abhishek asked on 05 Oct 2023, 09:57 AM
I have 2 dropdown list. one dropdown has the country & another dropdown has state.  When i select any item in the country dropdown, the corresponding state value should be auto selected in another dropdown.   Please help

1 Answer, 1 is accepted

Sort by
1
Accepted
Vessy
Telerik team
answered on 06 Oct 2023, 06:00 PM

Hi Abhishek,

You can achieve the desired result by utilizing the controlled mode f the Dropdown and share the same value object between two of them with different text field.

For convenience, I have prepared a sample demonstrating this approach:

Please, give it a try and let me know in case you need further assistance on this matter.

Regards,
Vessy
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Abhishek
Top achievements
Rank 2
Iron
Iron
Iron
commented on 09 Oct 2023, 12:26 PM

Hi Vissey, Thank you for your quick assistance. Actually in my project i am using FormDropDownList.  If i use DropDownList directly the solution you have given will work. I am trying to implement dropdown  with FormDropDownList. So can you please help me how can i pass the value property to FormDropDownList ??
Vessy
Telerik team
commented on 11 Oct 2023, 12:12 PM

Hi, Abishek,

The FormDropDownList component used in the form is a custom wrapper of the KendoReact DropDownlist and Label components. In order to achieve the same, you will need to pass the corresponding values to the nested DropDowns by extending the defined properties.

 

Vessy
Telerik team
commented on 11 Oct 2023, 01:20 PM

For conveninece, I have created a sample demonstrating this approach. Note that the initial value is set to the Form itself, as well as that both Fields holding the DropDownList components share the same name:

Abhishek
Top achievements
Rank 2
Iron
Iron
Iron
commented on 20 Oct 2023, 08:50 AM

Actually i am using initialvalues for some other purpose. Is there another way except this?
Vessy
Telerik team
commented on 24 Oct 2023, 08:00 AM

Hello, Abhishek, 

Sharing the same name between the Fields will keep them cascading and in the same group but there will not be any initial values selected if this prop is not set:

Abhishek
Top achievements
Rank 2
Iron
Iron
Iron
commented on 27 Oct 2023, 10:10 AM

Thank you for the help. It worked for me.
Vessy
Telerik team
commented on 27 Oct 2023, 11:36 AM

You are welcome, Abhishek :)
Tags
DropDownList
Asked by
Abhishek
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Vessy
Telerik team
Share this question
or