如何在表单select选项中用Enter键模拟onClick触发函数

我有一个向函数传递值的表单，代码如下：

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

我之前尝试过为select元素添加onchange事件，但存在其他问题，且需要重写生成选项列表的代码。

问题核心是<option>元素的键盘事件在多数浏览器中不会被触发，焦点实际落在<select>元素上。直接给<select>绑定键盘事件，就能在按下Enter时获取选中选项并调用对应函数，且无需重写原有选项生成逻辑。

方法1：通过自定义属性存储参数 #

给每个<option>添加自定义属性存储myfun所需参数，再给<select>绑定按键处理函数：

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

function handleEnter(event) {
    // 兼容不同浏览器的Enter键检测
    if (event.key === 'Enter' || event.keyCode === 13) {
        const select = event.target;
        const selectedOption = select.options[select.selectedIndex];
        // 从自定义属性中取参数并调用函数
        myfun(selectedOption.dataset.id, selectedOption.dataset.h, selectedOption.dataset.k);
    }
}

// 原myfun函数保持不变
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;
}

方法2：通过值映射表获取参数 #

如果不想修改<option>标签，可以提前创建选项值与参数的映射表，按下Enter时通过选中值匹配参数：

<TR><TD>Select</TD><TD><select name=k_id onkeydown="handleEnter(event)">
<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>

// 定义选项值到参数的映射
const optionParams = {
    '1': ['10', '0.1', '1'],
    '2': ['20', '0.2', '2'],
    '3': ['30', '0.3', '3'],
    '4': ['40', '0.4', '4']
};

function handleEnter(event) {
    if (event.key === 'Enter' || event.keyCode === 13) {
        const params = optionParams[event.target.value];
        if (params) {
            myfun(...params);
        }
    }
}

// 原myfun函数保持不变
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;
}

内容的提问来源于stack exchange，提问作者Jamez