<label> and <select> in IE 3

[blueark]

I just noticed something in IE 6 (not sure about other versions). Take the following code:

<label for="testList">My List</label>
<select id="testList">
    <option>Option 1</option>
    <option>Option 2</option>
    <option selected="selected">Option 3</option>
</select>

Option 3 is selected by default. I thought that clicking on the label will simply select the drop-down list, and indeed it does in some of the browsers I tried it on. In IE, not only does it select it, but it resets it to the first element.

Ok, with 3 options, it's no big deal, but when you're selecting, say, a country from a list, it's very inconvenient. Is there any way to overcome this?

 

[cLFlaVA]

Wow, that is quite interesting. I've never come across that before. How important is it to have the select be focused when the label is clicked? If it's not too important, you could do this:

<label for="testList"[blue] onclick="return false;"[/blue]>My List</label>
<select id="testList">
    <option>Option 1</option>
    <option>Option 2</option>
    <option selected="selected">Option 3</option>
</select>

*cLFlaVA
----------------------------
[tt]Sigs cause cancer.[/tt]

 

[blueark]

Thanks for the reply. That could get me out of trouble. I also tried moving the onclick to the select statement:

<label for="testList">My List</label>
<select id="testList" onclick="return false;">
    <option>Option 1</option>
    <option>Option 2</option>
    <option selected="selected">Option 3</option>
</select>

That seems to work exactly as expected. Can you think of any drawbacks to putting it there instead? Other than completely unnecessary code to keep IE happy?!

Thanks again.

 

[cLFlaVA]

Yeah, I wouldn't put it there. You may end up actual canceling the click event of the [tt]select[/tt], never allowing the user to pick an option. That's just a foresight though, I may be overcautious.

My suggestion: just stick with the [tt]onclick[/tt] in the [tt]label[/tt] tag.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]

 

[blueark]

I checked Microsoft's HTML reference for the label tag:

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/label.asp

The onclick event fires for both the label and the control referenced by it, which makes sense. What's weird is that with the onclick statement in the select tag, it behaves exactly as a normal select tag without the label and onclick statement. When both onclick events are fired, however, it seems to reset the control too.

I did a quick test, and the onclick statement in the select tag seems to work correctly in the few browsers I tried. I'll just try it out for a while locally to see if any problems arise.

 

[cLFlaVA]

sounds good.


*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]

 

[blueark]

Your comments about the user potentially not being able to click the select item got me thinking. Although it doesn't seem to be an issue, I'd rather be safe, so how about putting the onclick code back into the label, and setting the focus manually.

<label for="testList" onclick="testList.focus(); return false;">My List</label>
<select id="testList">
    <option>Option 1</option>
    <option>Option 2</option>
    <option selected="selected">Option 3</option>
</select>

That seems to do the trick! Thanks for your help.

 

[cLFlaVA]

no problemo.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]

 

[cLFlaVA]

I love mysterious stars!

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]