主页 / 问题 / 672971
Accepted
Dima Vasiluk
Asked:2020-05-30 23:34:11 +0000 UTC2020-05-30 23:34:11 +0000 UTC

如何从选项中获取 data-* 值？

  • 772

我正在使用 select 元素。我尝试从其单独的选项中获取插入到属性中以供后续计算的数据。试过：

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

然而，结果没有输出任何东西。如何将 data-* 属性放入变量或数组中？

javascript

2 个回答

  1. Best Answer

    document.getElementsByTagName("option")返回没有 的元素集合getAttribute。首先，您需要获取一些特定节点，然后才能使用属性。

    例如，像这样：

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

    了解有关HTMLSelectElement的更多信息。

    • 5

  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>

    • 3

相关问题