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

jquery get all attributes
jquery data
jquery has attribute
html data attribute jquery
jquery update data attribute
jquery add data attribute
jquery data selector
jquery has data attribute

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.

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>

[Solved] Jquery.data returning undefined results, Try: Hide Copy Code. var newItem = $("<li />").attr("id", item._id).text(item.name); console.log("ID:", newItem.attr("id"), newItem);. Since upgrading from 1.4.x to 1.6.1 all the code that selects the contents of an XML attribute by the name of 'value' has stopped working. Upon investigation,

$("#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>

.attr(), As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To safely set values on DOM objects without memory leaks, use .data​() . WARNING: When setting the 'class' attribute, you must always use quotes! As of jQuery 1.6, the.attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the.prop() method.

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

jQuery.data(), The jQuery.data() method allows us to attach data of any type to DOM Calls such as jQuery.data( el, "name", undefined ) will return the corresponding data for Regarding HTML5 data-* attributes: This low-level method does NOT retrieve  undefined is not recognized as a data value. Calls such as.data("name", undefined) will return the jQuery object that it was called on, allowing for chaining.

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>

.prop(), It returns undefined for the value of a property that has not been set, or if the matched set Before jQuery 1.6, the .attr() method sometimes took property values into To safely set values on DOM objects without memory leaks, use .​data() . undefined is easy to do, especially since return value already could be undefined - $({}).scrollTop() // undefined and correlates with ECMA spec, but again, jQuery is DOM-centric so it might make sense to be more align with it?

.data(), Using the data() method to update data does not affect attributes in the DOM. Calls such as .data( "name", undefined ) will return the jQuery object that it was  When I hardcode the values for telephone, address and company and click continue the fields are filled and customer is forwarded to next step. If I want to get the values for the inputfields via jQuery jQuery('#billing\\:aitoc_checkout_969').val() console alsways returns undefined. No matter what I write into that inputfield it's always

Don't use the jQuery .data() method. Use .attr , I just discovered the hard way that the jQuery .data() method is horribly broken. .data() is always assuming that I want to cast my String value and "undefined"){​return this.attr("data-"+sel);} else {this.attr("data-"+sel, val);}};. Hi every, I have this two HTML select (consigna_id depends on manufacturer_id selection):

undefined, The global undefined property represents the primitive value undefined. Property attributes of undefined A method or statement also returns undefined if the variable that is being evaluated Update compatibility data on GitHub WebAssembly · decodeURI() · decodeURIComponent() · encodeURI()  If you store 0, false or null as a value for the data, it will always return undefined. Reason being, if it is stored as a camelized key, the below condition will always fail, and then $.data will always return the nonexisting non-camelized data, which is undefined.

Comments
  • There is no data-code attribute in the element you're selecting; the <option> elements have them, so: $('#country option:selected').data('code') (assuming you want the data-code attribute-value from the selected <option>, obviously).
  • #country exposes no data-code attribute. Only option does. Check your function arguments: console.log(arguments)
  • I tried them both because I the other one didn't work. It works now though thank you very much.
  • It should.. You're welcome brother... Glad I could help.