CODEWITHSUNDEEP
jqueryhtml
user2885544
user2885544

Reputation: 15

Access data attribute of html element

I have the following code but i cannot access the data-alt-engine attributen can someone please tell me where I am going wrong, thank you in advance!

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

                });

Upvotes: 1

Views: 43

Answers (2)

palaѕн
palaѕн

Reputation: 73966

I think you want to access data-* attribute of the selected option which can be done using .data() method like:

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

Upvotes: 1

Quentin
Quentin

Reputation: 944441

attr gets the attribute value from the first element that matches the selector.

The first option doesn't have a data-alt-engine attribute.

Possibly you want to get the :selected option element.

(Aside: You might prefer data to attr))

Upvotes: 5

Related Questions