When I'm trying to append data-id; I got an error

Question

Check this out: here's a simple code that works fine

html

<select></select>
<button id="btn1">click me</button>

js

$('#btn1').on('click',function(){
    var select = $('select');
    select.append($('<option>').val('v2').text('text2'));
});

When I'm trying to append data-id I got an error. Any help?

select.append($('<option>').val('v2').text('text2').data-id('id1'));

http://jsfiddle.net/omarmakled/QQ44U/

Answer 1

The correct method to use is data() :

select.append($('<option>').val('v2').text('text2').data('id','id1'));

Or if you want an actual attribute you can use attr() :

select.append($('<option>').val('v2').text('text2').attr('data-id','id1'));

Answer 2

You can do this 2 ways

select.append($('<option>').val('v2').text('text2').attr('data-id','id1'));

or

select.append($('<option>').val('v2').text('text2').data('id', 'id1'));

http://api.jquery.com/data/
http://api.jquery.com/attr/

Answer 3

First, data-id string is illegal identifier in JS (as it contains hyphen), therefore even if it were available as a jQuery object method, you should have called it like that...

someObj['data-id'](someId);

Apparently, that's too messy for such a simple operation. In fact, there's no such method defined in jQuery.prototype - which instead expects you to employ either attr() (to set any attribute explicitly), or data() (dataset API specific one).

As a sidenote, you don't have to make that many calls: this...

select.append($('<option>', {
  value: 'v2',
  text: 'text2',
  'data-id': 'id1'
}));

... is both more readable AND efficient. Note the quotation marks around 'data-id': object properties can be non-quoted only if they are proper JS identifiers.

JSFiddle .