使用Enter鍵模擬表單選擇選項的onClick事件

Question

我有一個將值傳遞給函數的表單。

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

但如果使用者使用箭頭鍵和 Enter 鍵選擇選項，則不起作用。

如何按 Enter 鍵將適當的值傳遞給 myfun()？

我已經嘗試過：

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

我過去曾嘗試添加 onchange 來選擇元素，但還有其他問題。並且需要重寫填滿選項清單的程式碼。

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