Picker list based on a selection from another Picker list

Question

Created 2w

Replies 3

Boosts 0

Participants 2

I have come quite far with my first app and have various picker lists working well. However, I am stuck thinking through how to do this next picker.

My data model has Golf Course name and Tee. For each golf course there are multiple Tees and not all the same across the Courses.

Example of Data

CourseA RedTee CourseA GreenTee CourseA BlueTee CouseB RedTee CourseB YellowTee CourseB WhiteTee

I first give the client the ability to Pick a Course from a picker list. That works fine. Now I want to create a Picker list of Tees but only for that selected Course.

So if the client selected CourseB they would be presented with these Tees to select from RedTee YellowTee WhiteTee

How do I limit the second picker to only show the Tees for the selected Course?

Then in an associated question, once i have the Course and the Tee, I want to Auto fill the rest of a form with Slope, Rating and Yardage.

@Model
 class ScorecardData {
         var scorecardcourseName: String
         var scorecardTee: String
         var scorecardSlope: Double
         var scorecardRating: Double
         var scorecardYardage: Int

Here is my code for the Course Picker List

         Picker("", selection: $selectedCourse) {
                Text("Select a Course").tag(" ")
                
                ForEach(courses, id: \.self) { course in
                    Text(course.courseName)
                        .tag(course.courseName)
                }
            }
            .onChange(of: selectedCourse) {
                if(selectedCourse != nil) {
                    roundsdata.roundscourseName = selectedCourse!
                }
            }

Here is my current Picker list but its pulling all Tees for all Courses

            Picker("", selection: $selectedTee) {
                Text("Select Tee").tag(" ")
                
                ForEach (tees, id: \.self) { tee in
                    Text(tee.scorecardTee)
                        .tag(tee.scorecardTee)
                }
            }
                .onChange(of: selectedTee) {
                if(selectedTee != nil) {
                    roundsdata.roundsTee = selectedTee!
                }
            }

My @State and @Query statements are as follows in case there is a change there that is needed as well,

@State private var selectedTee: String? = "Select Tee"
@Query(sort: \ScorecardData.scorecardcourseName) private var tees: [ScorecardData]

@State private var selectedCourse: String? = "Select Course"
@Query(sort: \CourseData.courseName) private var courses: [CourseData]

Boost

Answer 1

Gyannes OP

2w

So on a whim I decided to post the same question to ChatGPT and in seconds got this response. it looks pretty good. I will try it. Thoughts from others …

To create a SwiftUI interface where the selection of one picker dynamically determines the options in another picker, you can use state management to manage the relationship between the two pickers.

Here’s an example:

Example: Dynamic Picker Lists

Imagine we have two pickers: 1. The first picker lets the user select a category (e.g., Fruit, Vegetable). 2. The second picker shows options based on the selected category.

import SwiftUI

struct ContentView: View { // State for the first picker (categories) @State private var selectedCategory: String = "Fruit" // State for the second picker (items) @State private var selectedItem: String = ""

// Data source for the categories and their respective items
private let itemsByCategory: [String: [String]] = [
    "Fruit": ["Apple", "Banana", "Orange"],
    "Vegetable": ["Carrot", "Potato", "Broccoli"]
]

var body: some View {
    VStack(spacing: 20) {
        // First Picker: Select Category
        Picker("Select Category", selection: $selectedCategory) {
            ForEach(itemsByCategory.keys.sorted(), id: \.self) { category in
                Text(category).tag(category)
            }
        }
        .pickerStyle(SegmentedPickerStyle())
        
        // Second Picker: Select Item
        Picker("Select Item", selection: $selectedItem) {
            // Dynamically show items based on selected category
            ForEach(itemsByCategory[selectedCategory] ?? [], id: \.self) { item in
                Text(item).tag(item)
            }
        }
        .pickerStyle(WheelPickerStyle())
        
        // Display Selected Values
        Text("Selected Category: \(selectedCategory)")
        Text("Selected Item: \(selectedItem)")
    }
    .padding()
    .onAppear {
        // Set an initial selection for the item picker
        selectedItem = itemsByCategory[selectedCategory]?.first ?? ""
    }
    .onChange(of: selectedCategory) { newCategory in
        // Update the item selection when the category changes
        selectedItem = itemsByCategory[newCategory]?.first ?? ""
    }
}

}

Key Points:

1.	State Management:
•	selectedCategory tracks the category selected in the first picker.
•	selectedItem tracks the item selected in the second picker.
2.	Dynamic Content:
•	The second picker’s items are filtered based on selectedCategory.
•	When selectedCategory changes, selectedItem is updated to ensure it’s valid.
3.	Appearance and Behavior:
•	Use .onAppear and .onChange(of:) to handle initial state and ensure smooth updates.

Output:

•	A segmented picker for categories.
•	A wheel picker for items filtered dynamically.
•	Displays the selected category and item below the pickers.

This structure is reusable and flexible for other scenarios with similar dynamic relationships.

0

Answer 2

darkpaw OP

2w

I don't get your issue? Your second picker simply needs to be given the data that you want to display in it.

If Course A has Red, Green and Blue tees, then your first picker is for Course A, and your second picker is for the tees within Course A.

If your first picker is Course B, then just tell the second picker to use the tees from Course B.

(As an aside, you'll never learn anything if you keep resorting to an AI bot. Though I see it recommended you use onChange(of:) like I did, i.e. the not deprecated version.)

0

Answer 3

Gyannes OP

2w

Thank you for your input. I realize j am old in general but new to SwiftUI doing. Given that I have 30 years of coding and development experience in older languages. given that I just started a month ago I think I have come a long way. tather than spin my wheels I will reach out to any source that might help. truth be told AI did a grear job and very quickly. It also answered the onchange issue.

everyone learns in different ways. Please respect my methods. if you prefer to not assist me going further I respect that as well. I wish you all the best.

0