By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
457,695 Members | 1,356 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 457,695 IT Pros & Developers. It's quick & easy.

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

P: n/a
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
Share this Question
Share on Google+
1 Reply


P: n/a
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.