Simulieren Sie das onClick-Ereignis einer Formularauswahloption mit der Eingabetaste

Question

Ich habe ein Formular, das einen Wert an eine Funktion übergibt.

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

Aber es funktioniert nicht, wenn der Benutzer die Option mit den Pfeiltasten und der Eingabetaste auswählt.

Wie übergebe ich den entsprechenden Wert an myfun(), indem ich die Eingabetaste drücke?

Ich habe es versucht:

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

Ich habe in der Vergangenheit versucht, onchange zu ausgewählten Elementen hinzuzufügen, hatte aber andere Probleme. Und der Code, der die Optionsliste füllt, muss neu geschrieben werden.

Answer 1

使用onChange调用会导致重复代码，更不可行的想法。

考虑将数据放入 data- 集中，这样您就可以在 select 上使用 onChange 事件。当您使用键盘时按和时，将触发此事件。因此无需重复代码。

然后使用 dataset 从新值中获取数据：

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

改用 select.onchange 事件，如下所示：

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

Select

Option 1
Option 2
Option 3
Option 4