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

Question

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

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

我的编程技能几乎为零。 我曾尝试将 ´attr("data-value")´ 和 ´$(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"> 

单击数据列表并选择奥克兰后，“奥克兰”（值）将显示在“f_shop_hidden”输入中。 我需要在那里显示数字“1”（数据值）。

我整个星期都在努力解决这个问题。 非常感谢。 :)

Answer 1

你可以这样做：

const select = this.form.shop_id;
const dataValue = select.options[select.selectedIndex].dataset.value;
console.log(dataValue);

Answer 2

你可以这样做：

 $('#listshops').on('input', function() { const value = $(this).val(); const data_value = $('#shop_ids [value="' + value + '"]').data('value'); document.getElementById("f_shop_hidden").value = data_value; });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input list="shop_ids" id="listshops" name="shop_id"/> <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">

我编辑了数据列表的答案。

Answer 3

输入更改时调用 JavaScript 函数。 在那里您可以访问数据列表 ID，然后分配给文本框。

<!-- HTML Part -->

<input list="shop_ids" id="listshops" name="shop_id" onchange="idDisplay();" />

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

<!-- JAVASCRIPT Part -->

<script>

function idDisplay()
{
    var element_input = document.getElementById('listshops');
    var element_datalist = document.getElementById('shop_ids');
    var opSelected = element_datalist.querySelector(`[value="${element_input.value}"]`);
    
    var id = opSelected.getAttribute('data-value');
    document.getElementById("f_shop_hidden").value = id;// Assigns data-value to textbox
} 
</script>