如何在onchange函数中传递数据列表的数据值？

Question

我有一个带有“值”和“数据值”的数据列表。我设法只显示一个值（奥克兰，曼谷）。可以根据需要工作。

但是，我需要将“数据值”传递给选项（选择）更改时的另一个输入。

我的编程技能几乎为零。我尝试将“ attr（“数据值”）“和” $（this）.data（“ id”）“添加到我的代码中，但是它不起作用。当我从数据列表更改值时，另一个输入为空或显示“未定义”。

<input list="shop_ids" id="listshops" name="shop_id" onchange="this.form.f_shop_hidden.value=this.form.shop_id.value" />

<datalist id="shop_ids">

<option data-value="1" value="Auckland"></option>

<option data-value="2" value="Bangkok"></option>

<option data-value="3" value="Sydney"></option>

</datalist>

<!-- Text field, where data-value should be displayed -->

<input type="text" name="f_shop_hidden" id="f_shop_hidden"> 

单击数据列表并选择Auckland后，“ f_shop_hidden”输入中将显示“ Auckland”（值）。我需要在此处显示数字“ 1”（数据值）。

我整个星期都在努力破解这个坚果。非常感谢你。:)

Answer 1

您可以执行以下操作：const select = this.form.shop_id;const dataValue = select.options[select.selectedIndex].dataset.value;console.log(dataValue);