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