如何通过 vanialla JavaScript 获取所选选项的数据属性？

Question

我正在尝试使用 vanilla JavaScript 获取所选选项的数据属性。

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>

<select id="roomno" name="roomno">

    <option value="1" data-daily-rate="50" data-weekly-rate="300" data-monthly-rate="1200">1 - Single room</option>

    <option value="2" data-daily-rate="100" data-weekly-rate="600" data-monthly-rate="2500">2 - Double Bedroom</option>

    <option value="3" data-daily-rate="150" data-weekly-rate="850" data-monthly-rate="4000">3 - Deluxe</option>    

</select>

<script>

document.addEventListener("DOMContentLoaded", () =>

{

    $("#roomno").on("change", function() // Used jQuery only for this

    {     

        calculateRate();

    });

});

function calculateRate()

{

    let roomno = document.getElementById("roomno");

    let daily_rate = roomno.dataset['daily-rate'];

    console.log(daily_rate);

}

</script>

Answer 1

要获得选定的选项，您可以使用：var roomno = e.options[e.selectedIndex];要获取所选选项的数据集值，您可以使用&nbsp;roomno.dataset.dailyRate&nbsp;// Or,&nbsp;roomno.dataset['dailyRate']此外，您还可以访问其他数据属性，例如：&nbsp;roomno.dataset.dailyRate&nbsp;roomno.dataset.weeklyRate&nbsp;roomno.dataset.monthlyRate此外，您不需要仅为此使用 jQuery $("#roomno").on("change", function()：. 您可以附加change事件侦听器，例如：&nbsp;document.getElementById("roomno").addEventListener("change", calculateRate);在这里演示：document.addEventListener("DOMContentLoaded", () => {&nbsp; document.getElementById("roomno").addEventListener("change", calculateRate);});function calculateRate() {&nbsp; let e = document.getElementById("roomno");&nbsp; var roomno = e.options[e.selectedIndex];&nbsp; let daily_rate = roomno.dataset.dailyRate;&nbsp; console.log(daily_rate);}<select id="roomno" name="roomno">&nbsp; <option value="0" >-- Select --</option>&nbsp; <option value="1" data-daily-rate="50" data-weekly-rate="300" data-monthly-rate="1200">1 - Single room</option>&nbsp; <option value="2" data-daily-rate="100" data-weekly-rate="600" data-monthly-rate="2500">2 - Double Bedroom</option>&nbsp; <option value="3" data-daily-rate="150" data-weekly-rate="850" data-monthly-rate="4000">3 - Deluxe</option></select>