查询所选选项的数据集不起作用

Question

我有一个像这样的选择下拉列表：

var itemInfo = ($(this).children('option:selected').data('name'));

console.log(itemInfo);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="delivery-options" class="custom-select">

<option selected="" value="0">VÁLASSZON!</option>

<option value="1790" data-price="1790" data-name="MPL küldemény előre fizetéssel" data-id="4TB994cA318NHg6u8ILM">MPL küldemény előre fizetéssel - 1&nbsp;790&nbsp;Ft</option>

<option value="990" data-price="990" data-name="Foxpost automatába" data-id="cC62JjhpDE7ksFd6A2jd">Foxpost automatába - 990&nbsp;Ft</option>

<option value="1611" data-price="1611" data-name="GLS háztól-házig futár előre fizetéssel" data-id="i5lwg116QsFzTuuSuxBk">GLS háztól-házig futár előre fizetéssel - 1&nbsp;611&nbsp;Ft</option>

</select>

根据我在 StackOverflow 中找到的信息，我尝试过：

这有效：

var itemInfo = ($(this).children('option:selected').data('name'));

这些返回未定义：

var itemInfo = ($(this).children('option:selected').dataset);
var itemInfo = ($(this).children('option:selected').dataset[0]);

正确的方法是什么？我需要整个数据集作为一个对象。

Answer 1

使用$("option:selected",this)和.data()$(function() {&nbsp; $("#delivery-options").on("change",function() {&nbsp; &nbsp; console.log($("option:selected",this).data())&nbsp; })})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><select id="delivery-options" class="custom-select">&nbsp; <option selected="" value="0">VÁLASSZON!</option>&nbsp; <option value="1790" data-price="1790" data-name="MPL küldemény előre fizetéssel" data-id="4TB994cA318NHg6u8ILM">MPL küldemény előre fizetéssel - 1&nbsp;790&nbsp;Ft</option>&nbsp; <option value="990" data-price="990" data-name="Foxpost automatába" data-id="cC62JjhpDE7ksFd6A2jd">Foxpost automatába - 990&nbsp;Ft</option>&nbsp; <option value="1611" data-price="1611" data-name="GLS háztól-házig futár előre fizetéssel" data-id="i5lwg116QsFzTuuSuxBk">GLS háztól-házig futár előre fizetéssel - 1&nbsp;611&nbsp;Ft</option></select>普通JS：window.addEventListener("load",function() {&nbsp; document.getElementById("delivery-options").addEventListener("change",function() {&nbsp; &nbsp; console.log(this.options[this.selectedIndex].dataset)&nbsp; })})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><select id="delivery-options" class="custom-select">&nbsp; <option selected="" value="0">VÁLASSZON!</option>&nbsp; <option value="1790" data-price="1790" data-name="MPL küldemény előre fizetéssel" data-id="4TB994cA318NHg6u8ILM">MPL küldemény előre fizetéssel - 1&nbsp;790&nbsp;Ft</option>&nbsp; <option value="990" data-price="990" data-name="Foxpost automatába" data-id="cC62JjhpDE7ksFd6A2jd">Foxpost automatába - 990&nbsp;Ft</option>&nbsp; <option value="1611" data-price="1611" data-name="GLS háztól-házig futár előre fizetéssel" data-id="i5lwg116QsFzTuuSuxBk">GLS háztól-házig futár előre fizetéssel - 1&nbsp;611&nbsp;Ft</option></select>

Answer 2

使用var&nbsp;itemInfo&nbsp;=&nbsp;$(this).children('option:selected').data();它将获取整个 data-* 属性。