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

【问题标题】：How to pass datalist's data-value in onchange function?如何在 onchange 函数中传递 datalist 的数据值？
【发布时间】：2019-05-10 12:22:03
【问题描述】：

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

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

我的编程技能几乎为零。我尝试在我的代码中添加“attr("data-value")”和“$(this).data("id")”，但它不起作用。当我从 datalist 更改值时，另一个输入为空或显示“未定义”。

<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”（数据值）。

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

【问题讨论】：

你在用jquery吗？
是的，我愿意。实际上，此代码在 Wordpress 添加帖子页面中使用。

标签： javascript jquery forms onchange datalist

【解决方案1】：

你可以这样做：

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

【讨论】：

【解决方案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">

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

【讨论】：

问题是，我的代码中没有

【解决方案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>

【讨论】：