Simulez l'événement onClick d'une option de sélection de formulaire à l'aide de la touche Entrée

Question

J'ai un formulaire qui transmet une valeur à une fonction.

<TR><TD>Select</TD><TD><select name=k_id>
<OPTION  value=1 onClick="myfun('10','0.1','1')">Option 1</OPTION>
<OPTION  value=2 onClick="myfun('20','0.2','2')">Option 2</OPTION>
<OPTION  value=3 onClick="myfun('30','0.3','3')">Option 3</OPTION>
<OPTION  value=4 onClick="myfun('40','0.4','4')">Option 4</OPTION>
</select>

function myfun(id,h,k,g)
    {
    var h_id=document.getElementById('h_id');
    h_id.value=id;
    var hind=document.getElementById('hind');
    hind.value=h;
    var koe=document.getElementById('koe');
    koe.value=k;
    }

Mais cela ne fonctionne pas si l'utilisateur sélectionne l'option à l'aide des touches fléchées et de la touche Entrée.

Comment transmettre la valeur appropriée à myfun() en appuyant sur la touche Entrée ?

J'ai essayé :

<OPTION  value=1 onClick="myfun('10','0.1','1')" onkeypress="if(event.key == 'Enter') {myfun('10','0.1','1')}">Option 1</OPTION>

<OPTION  value=1 onClick="myfun('10','0.1','1')" onkeyup = "if(event.keyCode == 13){myfun('10','0.1','1')}">Option 1</OPTION>

<OPTION  value=1 onClick="myfun('10','0.1','1')" onkeydown = "if(event.keyCode == 13){myfun('10','0.1','1')}">Option 1</OPTION>

J'ai déjà essayé d'ajouter onchange pour sélectionner des éléments, mais j'ai rencontré d'autres problèmes. Et le code qui remplit la liste des options doit être réécrit.

Answer 1

L'utilisation des appels onChange entraînera du code en double et des idées encore moins réalisables.

Envisagez de placer les données dans un ensemble data- afin de pouvoir utiliser l'événement data- 集中，这样您就可以在 select 上使用 onChange sur select. Cet événement est déclenché lorsque vous appuyez sur et tout en utilisant le clavier. Donc pas besoin de dupliquer le code.

Ensuite, utilisez dataset pour obtenir les données de la nouvelle valeur :

function myfun(event) {
    const e = event.target;
    const { id, h, k } = e.options[e.selectedIndex].dataset;
    
    console.log('Change: ', id, h, k);
}

Select

    Option 1
    Option 2
    Option 3
    Option 4

Answer 2

Utilisez plutôt l'événement select.onchange, comme indiqué ci-dessous :

function myfun(id,h,k){
  console.log(id,h,k)
}

Select
Option 1
Option 2
Option 3
Option 4