Как получить значение data-* из option?

330

01 июня 2017, 08:41

Работаю с элементом select. Из отдельного его option пытаюсь получить данные, которые я вставил в атрибут, для последующих вычислений. Пробовал:

https://gist.github.com/vasilukwolf/37b977547c4d0b03a82861f2482bc719,

однако результат ничего не вывел. Как получить data-* атрибуты в переменную или массив?

Answer 1

document.getElementsByTagName("option") возвращает коллекцию элементов, где нет метода getAttribute. Сперва необходимо получить какую-то конкретную ноду и уже потом работать с атрибутами.

Например, так:

$('select#model').change(function() {
    var selectedOption = this.options[this.selectedIndex];
    console.log(selectedOption.getAttribute("data-taxw1"));
});

Более подробней про HTMLSelectElement.

Answer 2

Что-то вроде такого. Закомментировал строчку, которая вызывала ошибку.

$("#start-date-input").datepicker(); 
$("#end-date-input").datepicker(); 
$.datepicker.setDefaults($.datepicker.regional['ru']); 
$('select#model').change(function() { 
    var val = $(this).val(); 
    console.log(val); 
    var opt = this.querySelector('[value="' + val + '"]'); 
    console.log(opt.getAttribute('data-taxw1')); 
    //console.log(document.getElementsByTagName("option").getAttribute("data-taxw1")); 
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 
<select id="model" name="model"> 
<option disabled="" selected=""> 
    Выберите коляску 
</option> 
<option data-pledge="5.000" data-taxm="5.500" data-taxw1="1.900" data-taxw2="3.600" data-taxw3="4.700" data-taxw4="5.300" value="Babyzen Yoyo 6+"> 
    Babyzen Yoyo 6+ 
</option> 
<option data-pledge="5.000" data-taxm="5.900" data-taxw1="2.100" data-taxw2="3.900" data-taxw3="4.900" data-taxw4="5.700" value="Babyzen Yoyo 6+ удлинн. кап"> 
    Babyzen Yoyo 6+ удлинн. кап 
</option> 
<option data-pledge="5.000" data-taxm="6.500" data-taxw1="2.300" data-taxw2="4.300" data-taxw3="5.400" data-taxw4="6.300" value="Babyzen Yoyo 0+"> 
    Babyzen Yoyo 0+ 
</option> 
<option data-pledge="5.000" data-taxm="7.700" data-taxw1="2.700" data-taxw2="5.100" data-taxw3="6.400" data-taxw4="7.500" value="Babyzen Yoyo+ 6+ 2016"> 
    Babyzen Yoyo+ 6+ 2016 
</option> 
<option data-pledge="5.000" data-taxm="7.900" data-taxw1="2.900" data-taxw2="5.400" data-taxw3="6.800" data-taxw4="7.700" value="Babyzen Yoyo+ 0+ 2016"> 
    Babyzen Yoyo+ 0+ 2016 
</option> 
<option data-pledge="5.000" data-taxm="5.900" data-taxw1="2.100" data-taxw2="3.900" data-taxw3="4.900" data-taxw4="5.700" value="Коляска-автокресло Donna 0+"> 
    Коляска-автокресло Donna 0+ 
</option> 
<option data-pledge="5.000" data-taxm="4.000" data-taxw1="1.400" data-taxw2="2.400" data-taxw3="3.200" data-taxw4="3.800" value="Автокресло Maxi-Cosi Pebble 0+"> 
    Автокресло Maxi-Cosi Pebble 0+ 
</option> 
<option data-pledge="5.000" data-taxm="11.500" data-taxw1="4.100" data-taxw2="7.800" data-taxw3="9.800" data-taxw4="10.900" value="Автокресло Maxi-Cosi 0+ на раме Babyzen Yoyo 0+"> 
    Автокресло Maxi-Cosi 0+ на раме Babyzen Yoyo 0+ 
</option> 
<option data-pledge="5.000" data-taxm="4.900" data-taxw1="1.700" data-taxw2="2.900" data-taxw3="3.900" data-taxw4="4.700" value="Mac Quest Denim"> 
    Mac Quest Denim 
</option> 
<option data-pledge="5.000" data-taxm="4.900" data-taxw1="1.700" data-taxw2="2.900" data-taxw3="3.900" data-taxw4="4.700" value="Aprica Karoon Plus"> 
    Aprica Karoon Plus 
</option> 
<option data-pledge="5.000" data-taxm="5.500" data-taxw1="1.900" data-taxw2="3.600" data-taxw3="4.700" data-taxw4="5.300" value="Aprica Air Ria Luxuna"> 
    Aprica Air Ria Luxuna 
</option> 
<option data-pledge="5.000" data-taxm="7.400" data-taxw1="2.600" data-taxw2="4.900" data-taxw3="6.100" data-taxw4="7.100" value="Bugaboo bee plus, кап стандарт"> 
    Bugaboo bee plus, кап стандарт 
</option> 
<option data-pledge="5.000" data-taxm="7.900" data-taxw1="2.900" data-taxw2="5.400" data-taxw3="6.800" data-taxw4="7.700" value="Bugaboo bee 3, кап стандарт"> 
    Bugaboo bee 3, кап стандарт 
</option> 
<option data-pledge="5.000" data-taxm="7.900" data-taxw1="2.900" data-taxw2="5.400" data-taxw3="6.800" data-taxw4="7.700" value="Bugaboo bee plus, кап летний"> 
    Bugaboo bee plus, кап летний 
</option> 
<option data-pledge="5.000" data-taxm="8.700" data-taxw1="3.200" data-taxw2="5.800" data-taxw3="7.200" data-taxw4="8.400" value="Bugaboo bee 3, кап летний"> 
    Bugaboo bee 3, кап летний 
</option> 
<option data-pledge="5.000" data-taxm="8.900" data-taxw1="3.500" data-taxw2="6.200" data-taxw3="7.500" data-taxw4="8.600" value="Bugaboo Bee 5 кап стандарт"> 
    Bugaboo Bee 5 кап стандарт 
</option> 
<option data-pledge="5.000" data-taxm="5.500" data-taxw1="1.900" data-taxw2="3.600" data-taxw3="4.700" data-taxw4="5.300" value="Valco Baby Snap 4"> 
    Valco Baby Snap 4 
</option> 
<option data-pledge="5.000" data-taxm="5.500" data-taxw1="1.900" data-taxw2="3.600" data-taxw3="4.700" data-taxw4="5.300" value="Valco Baby Snap"> 
    Valco Baby Snap 
</option> 
<option data-pledge="5.000" data-taxm="5.500" data-taxw1="1.900" data-taxw2="3.600" data-taxw3="4.700" data-taxw4="5.300" value="Baby Jogger City Mini"> 
    Baby Jogger City Mini 
</option> 
<option data-pledge="5.000" data-taxm="5.900" data-taxw1="2.100" data-taxw2="3.900" data-taxw3="4.900" data-taxw4="5.700" value="Baby Jogger City Mini GT"> 
    Baby Jogger City Mini GT 
</option> 
<option data-pledge="5.000" data-taxm="6.500" data-taxw1="2.300" data-taxw2="4.300" data-taxw3="5.400" data-taxw4="6.300" value="Maclaren Twin Techno для двойни"> 
    Maclaren Twin Techno для двойни 
</option> 
<option data-pledge="5.000" data-taxm="6.500" data-taxw1="2.300" data-taxw2="4.300" data-taxw3="5.400" data-taxw4="6.300" value="Maclaren Twin Triumph для двойни"> 
    Maclaren Twin Triumph для двойни 
</option> 
</select>