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

J

Joe Attardi

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!
 
R

RobG

Joe said:
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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top