如何通過 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

1. 要獲得選定的選項，您可以使用：

    var roomno = e.options[e.selectedIndex];

2. 要獲取所選選項的數據集值，您可以使用

    roomno.dataset.dailyRate // Or, roomno.dataset['dailyRate']

   此外，您還可以訪問其他數據屬性，例如：

    roomno.dataset.dailyRate roomno.dataset.weeklyRate roomno.dataset.monthlyRate

3. 此外，您不需要僅為此使用 jQuery： $("#roomno").on("change", function() 。您可以附加change事件監聽器，例如：

    document.getElementById("roomno").addEventListener("change", calculateRate);

演示在這里：

 document.addEventListener("DOMContentLoaded", () => { document.getElementById("roomno").addEventListener("change", calculateRate); }); function calculateRate() { let e = document.getElementById("roomno"); var roomno = e.options[e.selectedIndex]; let daily_rate = roomno.dataset.dailyRate; console.log(daily_rate); }

 <select id="roomno" name="roomno"> <option value="0" >-- Select --</option> <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>