Как передать данные-данные в функцию onchange?

Question

У меня есть список данных с "значениями" и "значениями данных". Мне удалось отобразить только значения (Окленд, Бангкок) в выборе. Это работает по мере необходимости.

Но мне нужно передать «data-value» на другой вход в тот момент, когда опция (select) изменяется.

У меня почти нулевые навыки программирования. Я пытался добавить в код код ´attr («data-value») ´ и ´ $ (this) .data («id») ´, но он не работает. Другой ввод либо пуст, либо отображается «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"> 

Как только я щелкаю на списке данных и выбираю Окленд, в поле ввода f_shop_hidden отображается «Окленд» (значение). Мне нужно отобразить число «1» (data-value).

Я пытался взломать этот орех всю неделю. Большое спасибо. :)

Answer 1

Вы можете сделать что-то вроде этого:

$('#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 2

Вы можете сделать что-то вроде этого:

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