Utilizzando i valori numerici per selezionare la voce da una casella a discesa con JavaScript

StackOverflow https://stackoverflow.com/questions/4574575

Domanda

Modifica

Ho un gran numero di caselle a discesa all'interno della mia pagina web. Una di queste caselle a discesa viene utilizzato per un singolo valore selezionato da una lista di opzioni. 

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

Come posso aggiungere un evento a questa sezione, in modo che quando si è a fuoco, ho potuto usare i tasti numerici come 1,2 .. per selezionare un'opzione invece di usare il mouse o le frecce per la selezione di un'opzione? Per chiarimenti: se premo "1" sulla mia tastiera, il valore selezionato sarebbe diventato il primo valore da quella lista, con "2" il valore selezionato diventa secondo valore da tale elenco

.

ho scelto di non utilizzare una libreria / quadro come jQuery / Mootools.

Grazie,

È stato utile?

Soluzione

Credo che questo possa risolvere il problema 

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

Il javascript sembra po 'disordinato perché deve gestire IE e tutti gli altri browser.

IE non passare un oggetto evento per la funzione di gestione, invece, dobbiamo utilizzare l'oggetto evento globale.

Allo stesso modo il codice di accesso anche è memorizzato in keyCode invece di which in IE.

Altri suggerimenti

Se hai meno di 10 opzioni, è sufficiente aggiungere il numero al testo: 

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

o forse più facile da leggere: 

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

Non ci sono altre codifica necessaria

Si potrebbe mettere un attributo 'rel' su ogni opzione che sarebbe la chiave necessaria per la selezione di questa opzione. Quindi, per il suo esempio potrebbe essere: 

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

Si potrebbe non essere alla ricerca per l'evento onfocus (), però, si dovrebbe essere alla ricerca per l'onKeyDown () (o simile) evento sulla casella di selezione, che potrebbe essere simile a questo: 

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;
    }
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top