471,596 Members | 860 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,596 software developers and data experts.

Drop-down (select) elements and radio buttons - best approach?

Hi all,

On a form on one of my pages I have two <select> elements, and each one
is paired up with a radio button. The idea is to choose an item from
one list or the other and select the radio button of the list you want
to use.

I'm using JavaScript to automatically select the radio button
corresponding to a list when you click on the list (using the onclick
event handler). Is that the best event to change on, or should this
behavior be triggered on the onChange event - so if they don't change
the value they won't have to re-select the other radio button?

Thanks for your advice in advance!
--
Joe Attardi

Feb 23 '06 #1
1 2812
Joe Attardi wrote:
Hi all,

On a form on one of my pages I have two <select> elements, and each one
is paired up with a radio button. The idea is to choose an item from
one list or the other and select the radio button of the list you want
to use.

I'm using JavaScript to automatically select the radio button
corresponding to a list when you click on the list (using the onclick
event handler). Is that the best event to change on, or should this
behavior be triggered on the onChange event - so if they don't change
the value they won't have to re-select the other radio button?

Thanks for your advice in advance!


Neither, let the user select the radio button manually and use a UI
style to show which select will be used - say a red border around it or
similar.

The problem with onchange is that the user has to actually change the
select to get the value they want. Suppose you pro grammatically check
the radio button onchange. If the user selects a value in select A,
then wants to look at select B and they change the selected value, the
radio goes to select B.

Firstly they have to notice that the checked radio button changed when
their attention was focused on the select. Secondly, to get the A radio
checked again they have to change the value of A to some other value,
then select the one they wanted again (or just check the radio button).

Using onclick is probably better, but I wouldn't do that either as they
still have to notice that the radio changed. And clicking on the select
is a non-intuitive way of selecting a radio button.

Consider using a single select with an option group (optgroup) element.

<URL:http://www.w3.org/TR/html4/interact/forms.html#edef-OPTGROUP>).
e.g.

<select>
<optgroup label="Set 1">
<option>blah 11
<option>blah 12
<option>blah 13
</optgroup>
<optgroup label="Set 2">
<option>blah 21
<option>blah 22
<option>blah 23
</optgroup>
</select>


--
Rob
Feb 23 '06 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

reply views Thread by Lauren Quantrell | last post: by
8 posts views Thread by WindAndWaves | last post: by
1 post views Thread by Torre Quinn | last post: by
3 posts views Thread by VB Programmer | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by Anwar ali | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.