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

单击数据列表并选择“奥克兰”后，“ 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>

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

3 个答案: