I recently managed to get dropdown selection to work by dynamically ouputing some data from php and using jquery to disable certain options in the dropdown depending on the stock quantity for my emerce site.

Here is the code:

The issue now is that I want to have the selection displayed as a radio button for now and eventually use css to to style it similar to something like this: (posted by another SO user)

So my question is: Should I convert the dropdown entirely into a chained radio button selection or do something like this: / (posted by another SO user) where radio buttons are generated by jquery and hide the dropdown using css?

I am concerned about usability and cross-browser issues.

Any input is much appreciated.

Thanks!

I recently managed to get dropdown selection to work by dynamically ouputing some data from php and using jquery to disable certain options in the dropdown depending on the stock quantity for my emerce site.

Here is the code: http://jsbin./osipe5/2/edit

The issue now is that I want to have the selection displayed as a radio button for now and eventually use css to to style it similar to something like this: http://jsbin./uwuje (posted by another SO user)

So my question is: Should I convert the dropdown entirely into a chained radio button selection or do something like this: http://jsfiddle/yJTdF/ (posted by another SO user) where radio buttons are generated by jquery and hide the dropdown using css?

I am concerned about usability and cross-browser issues.

Any input is much appreciated.

Thanks!

• javascript
• jquery
• html

Share Improve this question Follow asked Feb 27, 2011 at 21:56 AdilAdil 3,19355 gold badges3030 silver badges3030 bronze badges 0

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2 +25

If you live by progressive enhancement, your rendered markup should still be usable (and semantically valid) when everything else fails:

• CSS disabled
• JavaScript disabled
• no image support
• low screen resolution (e.g. mobile devices)
• no hover events (touch screens)

Go with whatever makes sense in these cases and use jQuery to pimp it up for everyone else. A dropdown may give you slightly improved usability on mobile devices.

I find jQueryUI Button very nice and it can help you style your buttons very easy.

It works with actual radio buttons so if mark your HTML right and no JS is used, it can't hurt anybody.

Anyway, if you plan to support non-JavaScript browsers (which you should), you must have a server-side validation routine.

First, you need to consider the people who would use your application. Dropdown list would be a little bit annoying for users who have slow connections especially that you've said that this is for your emerce site. Your site would possible be dealing multiple end-users with different attitudes.

Dropdown list

• The list items are hidden until the user clicks on the dropdown list and scroll for the items. This would matter if we are to judge for user interface issues. More client would prefer click and click and click rather than click and scroll.

Buttons

• The items are already display directly to the enduser and it is just a matter of knowing on what to click. And just by looking and page, the end-users will know what items are available and the thing is it is easier for them to choose.

Cross-Browser Issues

• That can be dealt anytime. There are many ways to make your script work on any browser. You might spend more time dealing with css problems rather than javascript issues with regards to browser patibilities. So far the mon problem with javascipts is when the client disables the javascripts to run on their browser. You can either decide to use server side controls to be sure.

I wouldn't remend trusting the user to have javascript enabled, so the "generate radio buttons using jQuery" option is out. I would use something very similar to the second link you posted (generate the two radio button groups' html pletely), but only use js to disable the color options that need to be disabled when the size option is selected. Also, on the server-side, you'd need to do those checks again and probably output an error page is something is off. This way, using only standard html (i.e. radio inputs) and css for prettying it up, and js for doing fancy stuff (the key here is that if the user doesn't have js on, they will still be able to use your site), you can have a usable cross-browser solution.

If in your final product you want it to behave like the second jsbin link, then I would say that radio buttons makes more sense. In the end, it will be considerably less work than needing to deal with the dropdown and all the manipulation you would need to do in order to acplish your final product.

In terms of implementation, you can change the class and click properties on the disabled radio buttons so that they are not available relatively easily. Whereas to dynamically change the dropdown information into the radio button UI...just sounds nasty.