I have a small question.

How do you gracefully degrade select filters?


With ajax you might have a State select and then a City select under it that would show the cities of the selected state. The city select would refresh based on the selected state. Then you would have a submit button for when the form needed to be submitted.

But what if there is no javascript? Do you show a "refresh" button whose lone purpose is to update the filters?

  • I'd question the point of making a city a select field in the first place.
    – DA01
    Jun 14, 2013 at 21:46
  • @DA01, sure but just as an example to make it simple to understand the question. Jun 15, 2013 at 4:26
  • Progressive enhancement is another way of thinking about this and may actually help avoid getting into these kinds of conumdrums. Jun 15, 2013 at 9:11

3 Answers 3


Unfortunately, the only option is a form submit after the selection. I would recommend a combo-box with a handy "submit" button nearby. Then the next page would load with a new list based on the user's previous selection. Keep the lists short though. If you need to present a lot of options you may want to consider radio buttons or checkboxes.

I am unsure of which programming language you use to be able to provide you with a code sample. I code in PHP myself. Let me know if I can help out with that.

EDIT: There is always <iframe>... :/

  • that is a good choice ;)
    – user32679
    Jun 15, 2013 at 17:19

Without Javascript you can use following schema:

  1. User enters city (from list or manual enter) and submits
  2. Server checks if there are duplicates.
    If there are, goto page 2
    a) define State
    b) goto page 3

Probably in most cases procedure will take single step (the number of duplicates not so big).



The attitude of "progressive enhancement" will dictate something along the lines of this:

  1. All options (cities) are available. OR: The City input is free text.
  2. If JS is enabled, JS filters city options or modifies the city input as needed. It can also perform initial validations on the client side.
  3. Server does the validations then page refreshes with highlighted errors if any.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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