CODEWITHSUNDEEP
javascriptjqueryhtml
Fader910
Fader910

Reputation: 71

jQuery.attr() and data() always return undefined

I've been trying to fix this issue I've had.

Essentially I have tried lowercasing all the values and it still didn't work.

HTML:

<select id="country">
    <option data-code="US" selected="selected" value="United States">United States</option>
    <option data-code="GB" value="United Kingdom">United Kingdom</option>
    <option data-code="AU" value="Australia">Australia</option>
</select>

jQuery:

$("#country").change(function () {
    var test = $("#country").data("code")
    alert(test)
})

And:

$("#country").change(function () {
    var test = $("#country").attr("data-code")
    alert(test)
})

I always get undefined as the response no matter what I do, as far as I can tell this shouldn't be an issue as the jQuery docs had a similar example that works fine. Chrome dev tools also show no errors so I am honestly stumped!

Thank you very much.

Upvotes: 0

Views: 102

Answers (4)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

You should call the jQuery method data() on the selected option that have the data-* attributes and not directly on the parent element select, like:

$('#country').change(function() {
  console.log( $(this).find('option:selected').data('code') );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="country">
  <option data-code="US" selected="selected" value="United States">United States</option>
  <option data-code="GB" value="United Kingdom">United Kingdom</option>
  <option data-code="AU" value="Australia">Australia</option>
</select>

NOTE : I prefer the use of .data() instead of .attr() (suggested in the other answer) since it's more efficient in such cases because it made especially for the data-* attributes.

Upvotes: 2

DaFois
DaFois

Reputation: 2223

you are not using the correct selector for the data-code attribute. Just because it doesn't stay on #country element.

So please modify your jQuery selector as follows:

$("#country").change(function () {
        var test = $("#country option:selected").attr("data-code");
        alert(test);
 })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="country">
    <option data-code="US" selected="selected" value="United States">United States</option>
    <option data-code="GB" value="United Kingdom">United Kingdom</option>
    <option data-code="AU" value="Australia">Australia</option>
</select>

at that point also the other way you where trying will work

$("#country").change(function () {
        var test = $("#country option:selected").data("code");
        alert(test);
})

Upvotes: 1

Jayffe
Jayffe

Reputation: 1279

You can use find to get the option selected, so you don't have to repeat $("#country")

$("#country").change(function () {
  var test = $(this).find("option:selected").data("code")
  alert(test)
})

Upvotes: 1

Atul Sharma
Atul Sharma

Reputation: 10675

$("#country").change(function () {
        var test = $("#country option:selected").attr("data-code")
        alert(test)
 })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="country">
    <option data-code="US" selected="selected" value="United States">United States</option>
    <option data-code="GB" value="United Kingdom">United Kingdom</option>
    <option data-code="AU" value="Australia">Australia</option>
</select>

Use option:selected along with the selector to find the option selected.

Upvotes: 2

Related Questions