<select> whose values depend on another <select>

Question

I can think of one way to do this, however I don't know if its the only way.

On a page on my website, I have a two select boxes, a 'parent' select box and a 'child' select box. The values that are inside the 'child' select box depend on what is selected in the 'parent' select box. This would be easy to solve in JavaScript, via AJAX calls, however I try to build my websites in such a way that they degrade gracefully when JavaScript is turned off.

The only way I can think of approaching this scenario for a non-js user is to have a form button that will reload the PHP page and append a variable to the URL, and then the PHP will detect this and send the values to the 'child' select. However this is a bit of a usability problem and IMO, an ugly way to approach this.

Are there any other ways I could go about doing this? The values don't necessarily need to be in select boxes.

Answer 1

Unfortunately, there's not really a good way to approach this without scripting if you want to keep the form all on one page - the idea you had with the button is probably the best you could get.

The alternate option would be to turn the form into a multi-step process, where they select the parent item on one page, and then are moved on to the next page in the process which has the child select - essentially, a wizard-style approach.

Answer 2

With Javascript disabled you have no choice but to wait for the user to submit back to the server.

If the values in your parent select are sufficiently small, you might be able to get away with having one select for each value, which will bypass the need to update the contents.

Honestly though, I wouldn't bother: stats show 1% or less of users have Javascript disabled. More people use Safari and Opera and a lot of people don't even bother to test their sites on those browsers.

Either that or you have to choose a different set of UI elements that will degrade more gracefully.

Lastly, it's worth pointing out that if a Website is done sufficiently well, you can get page refreshes done in under 300ms at which point there isn't much of a cost (in terms of user experience) of going back to the server.

Answer 3

Unless there are literally thousands of possible options you shouldn't need AJAX. You can simply load all possible values into the second select (with option groups for readability), and use JS to filter them once a parent is selected. You'll also want to disable the second box with JS, so the user always selects a parent first.

Answer 4

Using OPTGROUPs can help both with the JavaScript filtering and with usability when JavaScript is disabled (assuming there aren't a huge number of options).

For the second SELECT:

<select>
  <optgroup name="colors" label="Colors">
    <option value="red">Red</option>
    <option value="blue">Blue</option>
  </optgroup>
  <optgroup name="sizes" label="Sizes">
    <option value="small">Small</option>
    <option value="medium">Medium</option>
    <option value="large">Large</option>
  </optgroup>
</select>

Just remember, server side code needs to validate options even if JavaScript is enabled.