如何在onchange函数中传递datalist的数据值？
如何在onchange函数中传递datalist的数据值？
提问于 2019-05-10 20:22:04
我有一个包含"values“和"data-values”的datalist。我已经设法在select中仅显示值(奥克兰、曼谷)。它可以根据需要工作。
但是当option (select)发生变化时，我需要将"data-value“传递给另一个输入。
我几乎没有编程技能。我尝试在我的代码中添加“.data(”id“)”和“$(This)”，但是不起作用。当我更改datalist中的值时，另一个输入要么为空，要么显示为"undefined“。
<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，"Auckland“(值)就会显示在"f_shop_hidden”输入中。我需要在那里显示数字"1“(data-value)。
我整个星期都在试着解决这个问题。非常感谢。:)
回答 3
Stack Overflow用户
发布于 2019-05-10 20:28:34
你可以这样做：
const select = this.form.shop_id;
const dataValue = select.options[select.selectedIndex].dataset.value;
console.log(dataValue);Stack Overflow用户
发布于 2019-05-10 21:08:09
你可以这样做：
$('#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">
我编辑了数据列表的答案。
Stack Overflow用户
发布于 2020-07-28 20:38:59
当输入发生变化时调用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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56077640
复制相关文章
相似问题
腾讯云开发者
