tabindex issue with custom select box

Question

I found this script from google. But it isn't working with tabindex. can you help me how to fix this.

here is jsfiddle link

js snippt:-

$('select').each(function () {

    // Cache the number of options
    var $this = $(this),
        numberOfOptions = $(this).children('option').length;

    // Hides the select element
    $this.addClass('s-hidden');

    // Wrap the select element in a div
    $this.wrap('<div class="select"></div>');

    // Insert a styled div to sit over the top of the hidden select element
    $this.after('<div class="styledSelect"></div>');

    // Cache the styled div
    var $styledSelect = $this.next('div.styledSelect');

    // Show the first select option in the styled div
    $styledSelect.text($this.children('option').eq(0).text());

    // Insert an unordered list after the styled div and also cache the list
    var $list = $('<ul />', {
        'class': 'options'
    }).insertAfter($styledSelect);

Kindly can you tell what exactly you are trying to achieve. You did not mention anywhere — Milind, Aug 04 '14 at 11:19
what he means is that the new select box is not accessible via keyboard.. those events aren't there.. I see only `click` event being handled. Plus even before the select box works with keyboard, it needs to focus there. — Praveen Puglia, Aug 04 '14 at 11:37
just and example of what needs to be done... Not a complete fix.. but here it is.. http://jsfiddle.net/BB3JK/334/ — Praveen Puglia, Aug 04 '14 at 11:41
@pjp i am not able to select option. You just open selectbox but keyboard up and down key doesn't work. — Marmik Desai, Aug 04 '14 at 13:56
as i mentioned.. i didnt make the demo work completely..just gave you an idea of what is MISSING and WHAT YOU CAN DO to make sure that it works with keys — Praveen Puglia, Aug 07 '14 at 13:51

score 0 · Answer 1 · answered Oct 03 '18 at 17:52

0

Need to set tabindex dynamically with jQuery.

//Adds tabindex dynamically 
$this.attr("tabindex", "0");

http://jsfiddle.net/elitownsend/BB3JK/4733/

answered Oct 03 '18 at 17:52

EliTownsend

181
11

tabindex issue with custom select box

1 Answers1