Использование числовых значений для выбора элемента из выпадающего списка с JavaScript - PullRequest
Новая
       26

Использование числовых значений для выбора элемента из выпадающего списка с JavaScript

0 голосов
/ 01 января 2011

РЕДАКТИРОВАТЬ

У меня есть множество выпадающих списков на моей веб-странице.Один из этих раскрывающихся списков используется для одного выбранного значения из списка параметров. 

<SELECT id="Box0" name="">

<OPTION value="1920">my weird description</OPTION>

<OPTION value="1225">other weird description</OPTION>

<OPTION value="3112">some name dynamically fetched</OPTION>
</SELECT>

Как добавить событие в этот раздел, чтобы, когда оно в фокусе, я мог использовать цифровые клавишикак 1,2 .. чтобы выбрать вариант вместо использования мыши или клавиш со стрелками для выбора варианта?Для пояснения: если я нажму «1» на моей клавиатуре, выбранное значение станет первым значением в этом списке, а «2» выбранное значение станет вторым значением в этом списке.библиотека / фреймворк, такой как JQuery / Mootools.

Спасибо,

Ответы [ 3 ]

2 голосов
/ 01 января 2011

Вы можете поставить атрибут rel для каждого параметра, который будет необходимым ключом для выбора этого параметра.Итак, для вашего примера это может быть: 

<select id="Box0" name="">  
<option value="0" rel="0">None</option>  
<option value="1" rel="1">First</option>  
<option value="2" rel="2">Second</option>  
<option value="3" rel="x">Millionth</option>
</select>

Вы бы не искали событие onfocus (), хотя вы бы искали событие onkeydown () (или аналогичное) в поле выбора, который может выглядеть примерно так: 

var MySelect = document.getElementById('Box0');
var MyOptions = MySelect.getElementsByTagName('option');
var KeyPressed = //detect which key has been pressed. I can't remember the
                 //specific code for this off the top of my head
for (i=0; i<MyOptions.length; ++i) {
    if (MyOptions[i].rel == KeyPressed) {
        MyOptions[i].selected = true;
    } else {
        MyOptions[i].selected = false;
    }
}
2 голосов
/ 01 января 2011

Если у вас меньше 10 вариантов, просто добавьте число к тексту: 

<option value="0">0 none</option>
<option value="1">1 first</option>
<option value="2">2 second</option>

или, возможно, легче читать: 

<option value="0">0 none</option>
<option value="1">1st</option>
<option value="2">2nd</option>

Никакого другого кодирования не требуется

1 голос
/ 01 января 2011

Я думаю, что это может решить вашу проблему 

<html>
<head>
<script type="text/javascript">
    function selectvalue(e){
        e = e || event;

        var key = e.which || e.keyCode;

        if(!e.shiftKey && key >= 48 && key <= 57){
            var option = this.options[key - 48];
            if(option){
                option.selected = "selected";
            }
        }
    }
</script>
</head>
<body>

    <SELECT id="Box0" name="" onkeypress="selectvalue.apply(this, arguments)">
        <OPTION value="1920">my weird description</OPTION>
        <OPTION value="1225">other weird description</OPTION>
        <OPTION value="3112">some name dynamically fetched</OPTION>
    </SELECT>

</body>
</html>

Javascript выглядит немного грязно, потому что он должен обрабатывать IE и все другие браузеры.

IE не передает объект события в функцию-обработчик, вместо этого мы должны использовать объект глобального события.

Аналогичным образом код ключа также сохраняется в keyCode вместо which в IE.

...