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

我正在尝试使用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>

1-单人房
双卧室
3-豪华
document.addEventListener（“DOMContentLoaded”，（）=>
{
$（“#roomno”）。在（“change”上，function（）//仅为此使用jQuery
{     
计算（）；
});
});
函数calculateRate（）
{
让roomno=document.getElementById（“roomno”）；
让daily_rate=roomno.dataset['daily-rate']；
控制台日志（每日费率）；
}

要获取所选选项，您可以使用：

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

要获取所选选项的数据集值，可以使用

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

此外，您还可以访问其他数据属性，如：

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

此外，您不需要仅对以下内容使用jQuery:

$（“#roomno”）。在（“更改”，function（）

。您可以附加

change

事件列表，如：

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

此处演示：

document.addEventListener（“DOMContentLoaded”，（）=>{
文件。getElementById（“房间号”）。addEventListener（“更改”，计算）；
});
函数calculateRate（）{
设e=document.getElementById（“roomno”）；
var roomno=e.options[e.selectedIndex]；
让daily_rate=roomno.dataset.DailrRate；
控制台日志（每日费率）；
}

--挑选--
1-单人房
双卧室
3-豪华