Атрибут доступа к элементу html

Question

У меня есть следующий код, но я не могу получить доступ к атрибуту data-alt-engine. Может кто-нибудь, пожалуйста, скажите мне, где я ошибаюсь, спасибо заранее!

<select id="HotelList" name="HotelList" style="visibility: hidden; height: 30px;">
 <option class="selectmsg" value="All" data-cluster="my hotel">SELECT HOTEL</option
<option class="hotel" data-cluster="france" data-alt-engine="">Hotel 1</option>
<option class="hotel" value="10216" data-cluster="france" data-alt-engine="1">Hotel 2</option>
</select>

jquery

   $("#HotelList").change(function () {
                   // alert("Handler for .change() called.");
                    if ($("#HotelList option").attr("data-alt-engine") == "1")
                    { alert("1"); }
                    else 
                    { alert("0"); }

                });

Answer 1

attr получает значение атрибута из первого элемента, соответствующего селектору.

Первый параметр не имеет атрибута data-alt-engine.

Возможно, вы хотите получить элемент опции :selected.

(Помимо: вы можете предпочесть data attr))

Answer 2

Я думаю, вы хотите получить доступ к атрибуту data-* выбранной опции, что можно сделать с помощью метода .data(), например:

$('#HotelList').on('change', function(e) {
   var $selected = $("option:selected", this);
   var altEngine = $selected.data('alt-engine') || '';
   if (altEngine == "1") {
      alert("1");
   } else {
      alert("0");
   }
});