dougv.com « Doug Vanderweide

A while ago, I promised to answer Brian’s request for a demonstration of how to make multiple parent / child select lists — in other words, starting from one drop down / select list, having two or more child lists, each of which, in turn, may act as a parent to another list.

Multiple parent-child select lists are considerably more complicated to program than a single parent-child relationship. Not only do we have additional data relationships to consider (that is, how we’re going to tie child list values to the selected parent values), we now need to plan for what to do if a “middle” relationship is changed (more on this shortly).

Fortunately, we have a starting point in my original parent-child select list post. We don’t need to reinvent the wheel, therefore, so much as we need to upgrade from a horse cart to a Lamborghini.

Overview Of The Approach

As was the case when we had a single child drop-down list, we must begin with relational data for each select list. Apologies to those who consider that obvious, but for n00bs, what I mean is, if you want to select a value from List A and have List B populated with new values, then the values you intend to have in List B must somehow be keyed (linked) to the selection made in List A.

This multiple parent-child select list approach will work for as many parent-nee-child lists you want. If you want to populate 10 or 100 or 1,000 lists, you won’t need to change a single line of JavaScript; however, your PHP “helper” page will need some modification to accommodate all the queries you’ll need, and the more lists you have, the more code you’ll have to put into your HTML (more on this shortly).

Continue reading: Parent – Child Select Lists Revisited: Multiple Parent – Child Select Lists Via PHP, MySQL And jQuery »

Recently received via e-mail, in response to my previous blog entry, “Using AJAX To Data Bind A Child Drop Down List Based On The Selected Option Of A Parent Select Control“:

Would you be interested in modifying your solution in 2 ways. One would be to have it contain a country downdown as well. So it would be parent, child, child. I looked into attempting it myself, but my head began spinning as I began looking at all the code. The next option that would be nice, would be to have some sort of Dropdown Validation. Once the state is selected and the city is not yet selected, i am able to hit the submit button. So, it would be nice to see a message that says “Please fill choose a city”. …

Thank you,

Brian

I’m actually going to address this in two posts, because the first request — nested parent-child select lists — will take a bit more time to demo and describe than I have at the moment.

However, form validation — namely, ensuring the user chooses valid parent and child values from each select list — is something I can describe quickly and without extensive coding. And it’s a subject I should address, since my previous post noted that server-side validation was important to this solution, but I didn’t describe how to do it.

Continue reading: Parent – Child Select Lists Revisited: Validating Selected Options Via jQuery And PHP »

Recently asked on Yahoo! Answers:

How to generate a submenu on the basis of value in a menu without refreshing the page?
I want to use if else construct to generate a submenu on the basis of value from a textfield in the same form. You can get it in the way that when someone selects a country in a field…the states menu of the form changes according to the country selected.

This question, rephrased: You have two HTML select lists; one contains parent values — for example, a list of states — and the other will contain child values — say, a list of cities in the selected state. Every time the value in the parent drop down list is changed, the values in the child drop down list are also changed. (I’ll be using the terms select list and drop down list interchangeably.)

This is a fairly common programming problem, and there are lots of examples out on the Web on how to solve it. So why write another one?

Primarily, because this question is so common. Most of the questioners on Yahoo! Answers are beginners, and as a result, a significant number don’t necessarily know how to phrase a Web search to find a tutorial. Far easier, then, to demonstrate the technique here and simply refer Yahoo! Answers users to this blog entry.

The executive summary: We’ll use AJAX to query a database seamlessly in the background every time the value of the parent select list is changed. More specifically, we’ll use the jQuery library to handle the AJAX requests, bind the child list and make sure the form can’t be processed until the request is complete.

Continue reading: Using AJAX To Data Bind A Child Drop Down List Based On The Selected Option Of A Parent Select Control »

Recently asked on Yahoo! Answers:

ComboBox Question in Visual Basic?
I am trying to create a combobox dropdown list of countries. When user click on a country, it should add to the listbox. I manage to do it. But I want to enhance some form of checking. If the country is already added in the listbox, the user should not be able to select the same country again. These are my codes, but it won’t work. I don’t know what’s wrong. Can someone please help? Thanks!

For Each country As String In lstCountry.Items
If country Is cbxCountries.SelectedItem Then
MsgBox(“County already selected.”, MsgBoxStyle.Information, )
Else
lstCountry.Items.Add(cbxCountries.Select…
End If
Next

Thanks to .NET’s totally object-oriented approach to programming — especially its modularity, encapsulation and polymorphism — moving the selected value of a ComboBox (in ASP.NET, a DropDownList) control to a ListBox control takes three lines of code. And removing that same item from the ComboBox takes just one more line.

Because I want to demo this, I’ll be writing this in ASP.NET. However, it will translate just fine to Windows Forms, as well; the questioner doesn’t state which he’s using, but my guess is it’s Windows Forms, since he’s using a ComboBox control.

Continue reading: Moving ListItems From A ComboBox / DropDownList To A ListBox In .NET »