1

I need to create a Channel wherein it will have a series of drop down fields. When a user selects a value in the first drop down, the next drop down goes from a disabled state to an enabled state and its options are filtered based on the first drop down's selection.

A good example would be for the first drop down to be a list of states. When a state is selected, then the next drop down might have a list of counties. And when a county is selected, then the next drop down might have a list of cities. My data is not geographic like this example, though.

I don't think EE supports this natively, but I'm wondering if there is an add-on that might do this for me? If so, what would be a good approach to solving this?

3

This is a mostly a javascript issue, not really an ExpressionEngine issue. You can make fields dependent on one another using the Query Field field_type, I pointed you to before. But the key to this type of interaction is javascript. Using Asynchronous JavaScript (AJAX) for the client-side interaction.

Basically, when you select one option, you need the javascript to look-up the next options. The javascript can limit either the local XML data you've provided or send a query and response to a database, while remaining on the same page. This is mostly the same response as your prior question on TreeViews.

I mention jQuery's Isotope as a potential filtering system, but its more for visual filtering than one drop down menu to the next. You're looking for something more like this example at JSFiddle. It includes both examples of the HTML markup and the sample javascript. You may also want to look at the Chosen jQuery plugin or it's fork, Select2. These both focus on how to display and make the data more accessible, you'd still need something like the JSFiddle example to jump from field to field.

I recommend taking a look at Filtrify, the Single Category Select is possibly close to what I imagine you need, but you can play with all the other demos as well, to see what might work best for you. The Single Category Select example basically allows you to start with a large category and limit it to smaller categories. There example uses music instead of countries, and does it with a single dropdown menu, which may be a nicer user interface. They even have an option that uses Isotope.

Javascript is the key to all these interactions. jQuery is just one javascript framework/library that you can use. There's also Prototype and Script.aculo.us; but jQuery is probably the most popular. The downside to that is you can spend a lot of time looking for a plugin or example that works for you or you can learn to modify it yourself.

As I said before, this is really more about your data and thinking of the easiest way to present it to the user. If you absolutely need data in one field to be a subset of data based on a selection from another field, then start with the Query Field field_type. If you just have a long list of data in a database, excel, xml, etc., that you are trying to improve user interaction with, then take a look at all the options. The JSFiddle option will give you a starting point for multiple pulldown menus based on user selection, but something like the Single Category Select by Filtrify may present a far better option for the user.

Update: Was just at Devot-ee and noticed that someone had created an EE plugin for Chosen. I haven't tried it yet, but it may work for you, and resolve having to get up to speed on Javascript.

| improve this answer | |
  • Thanks. This is slightly different to the tree view problem I previously asked about. With the tree view problem, I wanted to application to be aware of the hierarchical data from the start. With this problem, I want the hierarchical data to be derived from previous Channel entries. In any case, maybe both have the same solutions. – ExpressionEngineNewbie Jan 1 '13 at 15:34
  • Both would be similar. If you have the data upfront, say as an XML file or even a query from the database, then you can use javascript to filter it how you like. If the option requires the user to select one option then restrict (or query) for the next selection of options, that's when the Query Field type can come into play, but the front end would still require javascript to make it seamless to the user, otherwise each option would require the page to reload to generate the next option. Javascript can do that inline, so to speak. – nonprofit_tech Jan 1 '13 at 15:47
  • You may want to take a look at an EE plugin for Chosen. – nonprofit_tech Jan 1 '13 at 21:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.