Jquery options , keyboard focus on hidden options

I have a select tag with some options, where some are hidden and some or not. When I press any key from the keyboard, the focus goes to hidden options also.

Example:

  <select id='myselect'>
    <options id='a'>a</options>
    <options id='b' style ='display:none'>b</options>
    <options id='c'>c</options>
    <options id='b'>b</options>
    </select>

Above I have a select which has 4 options, now only first, third and fourth will be visible, because I have kept second as hidden.

Now when I press 'b' from the keyboard, it goes to the hidden option, i.e I have to press 2 times 'b' from the keyboard to reach 4th option.

Can anyone tell me how can solve this problem?

When I press any key from the keyboard, the focus开发者_如何学Python should consider only the non-hidden options.

With HTML you have Classes and ID's as I'm sure you know, you can have as many classes on a page as you like, but you cannot have more than one ID on a single page, and this is where your problem lies. A HTML page must never have more than one ID.

The reason for this is because ID's are used to identify single elements on the page (Even if it's not visible, it doesn't mean it's not there.

You will need to rename your option ID's so they are all different.

Even if all tags have unique ids, hidden options get selected by keyboard. In order to avoid that, the element has to be disabled as well.

<select id='myselect'>
  <option id='a'>a</option>
  <option id='b' disabled style ='display:none'>b</option>
  <option id='c'>c</option>
  <option id='b2'>b</option>
</select>

In jquery 1.6+ this can be achieved by using .prop('disabled',false), for lower versions .attr('disabled','disabled')

I know the question is a little old, but I just had a similar situation and this question kept popping up...

Edit: Hiding options tags seems to work only work in firefox. For better compatibility one should remove the options instead of hiding them.