Using jQuery to set HTML data attributes on a select option

Question

How can I add HTML data attributes to a jQuery generated <select> <option>. I have the following code which programmatically sets the <options> of a select from the results of an Ajax query.

$request.then(function (data) {
    var p_id = $("[name='property_id']").val() || -1;
    for (var d = 0, l = data.length; d < l; d++) {
       var item = data[d];
       var option = new Option(item.text, item.id, false, (item.id === p_id ? true : false));
       // this doesnt work
       option.data('data-owner_id') = item.owner_id;
       option.data('data-property_id') = item.property_id;
       $element.append(option);
    }
    $element.trigger('change');
});

TylerH · Accepted Answer · 2023-03-03 16:53:49Z

5

.data() method takes the key and value paired. Try this:

   option.data('owner_id', item.owner_id);
   option.data('property_id', item.property_id);

Other than that, you can use .attr() method to add the attribute into your option. I will just give an example for you.

  option.attr('data-owner_id', item.owner_id);
  option.attr('data-property_id', item.property_id);

As the option variable is not a jQuery object, then you can't call the jQuery method like above function. The another option is using native JavaScript .setAttribute().

option.setAttribute('data-owner_id', item.owner_id);
option.setAttribute('data-property_id', item.property_id);

edited Mar 3, 2023 at 16:53

TylerH

21.3k84 gold badges84 silver badges122 bronze badges

answered Mar 26, 2015 at 2:20

Norlihazmey Ghazali

9,0701 gold badge26 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Greg Over a year ago

Close... but not quite. I tried both and got Uncaught TypeError: undefined is not a function. I think I may have to add the attributes via jquery after appending them to the element.

Norlihazmey Ghazali Over a year ago

At what line you got the error , undefined is not a function usually because you are attempting call jquery function that does't allow because the option already wrap as DOM. What about you change to option.setAttribute("data-owner_id", item.owner_id)

Collectives™ on Stack Overflow

Using jQuery to set HTML data attributes on a select option

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related