Получить атрибут обмена данными - PullRequest
Новая
       11

Получить атрибут обмена данными

2 голосов
/ 30 марта 2020

Я пытаюсь получить пользовательский атрибут данных, который я добавил к элементу option, но он не работает. 

<p>Select a new car from the list.</p>

<select id="mySelect" onchange="myFunction(this.data-price)">
  <option data-price="250" value="Audi">Audi</option>
  <option data-price="130" value="BMW">BMW</option>
  <option data-price="120" value="Mercedes">Mercedes</option>
  <option data-price="400" value="Volvo">Volvo</option>
</select>

<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
<p id="demo"></p>

function myFunction(val) {
  document.getElementById("demo").innerHTML = "You selected: " + val;
  console.log(val);
}

Когда я переключаю вызов функции на: 

onchange="myFunction(this.value)">

Возвращает значение правильно, но когда я выбираю data-price, он возвращает undefined на консоль.

Ответы [ 2 ]

0 голосов
/ 30 марта 2020

Ваш код говорит "получить свойство данных" и вычесть из него переменную "цена". Во-вторых, вы выбираете свойство для выбора, когда оно живет в опции. Вы не можете использовать его как значение.

Вы должны использовать набор данных для выбранной опции 

function myFunction(sel) {
  var opt = sel.options[sel.selectedIndex];
  var price = opt.dataset.price
  document.getElementById("demo").innerHTML = "You selected: " + price;
}
<p>Select a new car from the list.</p>

<select id="mySelect" onchange="myFunction(this)">
  <option data-price="250" value="Audi">Audi</option>
  <option data-price="130" value="BMW">BMW</option>
  <option data-price="120" value="Mercedes">Mercedes</option>
  <option data-price="400" value="Volvo">Volvo</option>
</select>

<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
<p id="demo"></p>
0 голосов
/ 30 марта 2020

Просто получите доступ к атрибуту данных выбранной опции (jQuery пример, так как вы пометили его): 

$("#mySelect").change(function() {
  const $this = $(this); // Cache $(this)
  const dataVal = $this.find(':selected').data('price'); // Get data value
  const selectedVal = $this[0].value;
  alert(`${dataVal}, ${selectedVal}`);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Select a new car from the list.</p>

<select id="mySelect">
  <option data-price="250" value="Audi">Audi</option>
  <option data-price="130" value="BMW">BMW</option>
  <option data-price="120" value="Mercedes">Mercedes</option>
  <option data-price="400" value="Volvo">Volvo</option>
</select>

<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
<p id="demo"></p>
...