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

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() {

  $("#delivery-options").on("change",function() {

    console.log($("option:selected",this).data())

  })

})

<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>

普通JS：

window.addEventListener("load",function() {

  document.getElementById("delivery-options").addEventListener("change",function() {

    console.log(this.options[this.selectedIndex].dataset)

  })

})

<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>

Answer 2

使用

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

它将获取整个 data-* 属性。