Add option to select with data attribute jQuery

Question

I'm still learning of how to use jQuery but I stumbled with a block and can't get through it. How to append an option to a select with data-* attribute? Currently I'm appending option through this code below:

$('<option>').val(object.val).text(object.object.text).appendTo('#includedItems');

Is there a way to also add data-* to the options?

Use .attr('data-something','somevalue') to add data-* attribute. That's said, depending your use case, you could instead use the data object .data('something','somevalue') which won't update the DOM attribute — A. Wolff
– A. Wolff, Commented Jun 5, 2014 at 9:31

Community · Accepted Answer · 2020-06-20 09:12:55Z

7

Use this .attr(),

$('<option>').attr('data-name','abcd');

Or .data()

$('<option>').data('name','abcd');

$('<option>').val(object.val).attr('data-name','abcd').text(object.object.text).appendTo('#includedItems');

Note: .data() stores data in DOM object, NOT as Html attribute while .attr() does.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 5, 2014 at 9:31

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

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

8 Comments

A. Wolff Over a year ago

That's not the way to set attribute using jQuery attr() method

iCollect.it Ltd Over a year ago

.attr('data-name="abcd"'); will only try and read an attribute! You forgot the comma. (Who upvoted this???)

iCollect.it Ltd Over a year ago

Your second option will likely store the value in the object's data and not as a data- attribute. Again, Who keeps upvoting this??? :)

iCollect.it Ltd Over a year ago

Hooray... Got there in the end :)

iCollect.it Ltd Over a year ago

Then you should have only shown the attr() part (as others did) and not complete lines that do nothing (including semi-colons) :) I will delete some of my comments shortly.

|

MrCode · Accepted Answer · 2014-06-05 09:31:37Z

5

Just add a attr() or data() call to the chain:

use attr() if you want to have an actual data-* attribute:

$('<option>').val(object.val).text(object.object.text).attr('data-x', 'y').appendTo('#includedItems');
                                                       ^ call attr()

Use data() to use jQuery's internal data storage system (doesn't use an attribute)

$('<option>').val(object.val).text(object.object.text).data('x', 'y').appendTo('#includedItems');
                                                       ^ call data()

answered Jun 5, 2014 at 9:31

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

Comments

Milind Anantwar · Accepted Answer · 2014-06-05 09:30:21Z

2

You can use:

 $('<option data-smdata="value"></option>').val(object.val).text(object.object.text).appendTo('#includedItems');

answered Jun 5, 2014 at 9:30

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

2 Comments

iCollect.it Ltd Over a year ago

I would have upvoted you for getting in first, but I don't think adding HTML attributes in strings is generally a good idea (i.e. keep the $('<..>') part to a minimum where possible). Note: This is purely from a maintenance perspective. Cheers.

Milind Anantwar Over a year ago

@TrueBlueAussie: indeed. solution provided by shaunakde is better and feasible than mine. cheers :)

Nimesh Vaghasiya · Accepted Answer · 2021-01-08 13:25:53Z

2

You can use:

$('#dropdownId').append($('<option/>', {
     value: value,
     text: displayText,
     selected: isSelected ? true : false,
     'data-description': descriptionText
}));

answered Jan 8, 2021 at 13:25

Nimesh Vaghasiya

1,0074 gold badges15 silver badges31 bronze badges

Comments

cernunnos · Accepted Answer · 2014-06-05 09:32:01Z

1

You can use .attr("data-lala",val) to create an attribute on an element, or .data("lala",val) if you dont mind if that information stays hidden in the DOM (an inspect may not show the right value).

answered Jun 5, 2014 at 9:32

cernunnos

2,7961 gold badge21 silver badges18 bronze badges

Collectives™ on Stack Overflow

Add option to select with data attribute jQuery

5 Answers 5

8 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

8 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related