[英]How do I get a data attribute of a selected option via vanialla JavaScript?
I am trying to get a data attribute of a selected option using vanilla 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>
To get selected option you can use:要获得选定的选项,您可以使用:
var roomno = e.options[e.selectedIndex];
To get the selected option's dataset value you can use要获取所选选项的数据集值,您可以使用
roomno.dataset.dailyRate // Or, roomno.dataset['dailyRate']
Also, you can access other data attributes like:此外,您还可以访问其他数据属性,例如:
roomno.dataset.dailyRate roomno.dataset.weeklyRate roomno.dataset.monthlyRate
Also, you do not need to use jQuery only for this: $("#roomno").on("change", function()
. You can attach change
event listner like:此外,您不需要仅为此使用 jQuery: $("#roomno").on("change", function()
。您可以附加change
事件监听器,例如:
document.getElementById("roomno").addEventListener("change", calculateRate);
DEMO HERE:演示在这里:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.