Simulasikan acara onClick pilihan pemilihan borang menggunakan kekunci Enter

Question

Saya mempunyai borang yang menghantar nilai kepada fungsi.

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

Tetapi ia tidak berfungsi jika pengguna memilih pilihan menggunakan kekunci anak panah dan kekunci Enter.

Bagaimana cara saya menghantar nilai yang sesuai kepada myfun() dengan menekan kekunci Enter?

Saya dah cuba:

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

Saya pernah cuba menambah onchange untuk memilih elemen pada masa lalu, tetapi mengalami masalah lain. Dan kod yang mengisi senarai pilihan perlu ditulis semula.

Answer 1

Menggunakan onChange panggilan akan membawa kepada kod pendua dan idea yang kurang boleh dilaksanakan.

Pertimbangkan untuk meletakkan data ke dalam set data- supaya anda boleh menggunakan acara data- 集中，这样您就可以在 select 上使用 onChange pada select. Acara ini dicetuskan apabila anda menekan dan semasa menggunakan papan kekunci. Jadi tidak perlu menduplikasi kod.

Kemudian gunakan dataset untuk mendapatkan data daripada nilai baharu:

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

Gunakan acara select.onchange, seperti yang ditunjukkan di bawah:

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

Select
Option 1
Option 2
Option 3
Option 4