Как получить атрибут данных выбранной опции через vanialla JavaScript? - PullRequest
Новая
       3

Как получить атрибут данных выбранной опции через vanialla JavaScript?

0 голосов
/ 18 марта 2020

Я пытаюсь получить атрибут данных выбранной опции, используя 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 Ответ

1 голос
/ 18 марта 2020

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

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