Append select box options dynamically with attributes

Question

I need to append extra data to my select box options. here is my code.

Html:

<select id="questionNumber" class="form-control">
   <option>Select Number</option>
</select>

JQuery:

$.each(result.data, function (key, value) {
    $("#questionNumber").append($('<option>', {
        value: value.id,
        text: value.number
    }));
});

So i can add value and text but i want to append attributes also to this appended option like

data-marks = value.mark

So my expected result would be like

<select id="questionNumber" class="form-control">
   <option>Select Number</option>
   <option value="170" data-mark="2">1</option>
   <option value="171" data-mark="3">2</option>
</select>

What should i do for this? Thanks.

Possible duplicate of jQuery create a new element with `data` HTML attribute — 31piy
– 31piy, Commented Jul 10, 2017 at 10:09

Shiladitya · Accepted Answer · 2017-07-10 10:06:51Z

3

Here you go with the solution https://jsfiddle.net/u5vek2jc/

var result = {data:[
	{
  	id:"5",
    number: "5"
  },
  {
  	id: "89",
    number: "89"
  }
]}
$.each(result.data, function (key, value) {
    $("#questionNumber").append($('<option>', {
        value: value.id,
        text: value.number,
        'data-mark': value.id
    }));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="questionNumber" class="form-control">
   <option>Select Number</option>
</select>

answered Jul 10, 2017 at 10:06

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

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

Comments

Rory McCrossan · Accepted Answer · 2017-07-10 10:06:57Z

2

You can add the data attribute to the HTML you generate. Also note that you can amend the logic so that the DOM is only updated once, instead of inside each iteration. Try this:

var html = result.data.map(function(o) {
  return `<option value="${o.id}" data-mark="${o.mark}">${o.number}</option>`;
}).join('');
$("#questionNumber").append(html);

answered Jul 10, 2017 at 10:06

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

1 Comment

Rory McCrossan Over a year ago

As I mentioned on your answer, using data() means that the attribute will not appear in the DOM. The OP stated that as a requirement. It's possible that data() may meet their needs too

RAUSHAN KUMAR · Accepted Answer · 2017-07-10 10:08:39Z

1

iterate over your data to create options, and then append it to your select element

$html='';
$.each(result.data, function (key, value) {
    html +='<option value="' + value.id + '"  data-mark="'+value.mark+'">' + value.number + '</option>';
});
$("#questionNumber").append(html);

edited Jul 10, 2017 at 10:08

answered Jul 10, 2017 at 10:04

RAUSHAN KUMAR

6,0345 gold badges37 silver badges70 bronze badges

1 Comment

Rory McCrossan Over a year ago

@31piy this is exactly what the OP wants, and is much faster than performing a DOM operation once per iteration

Max Ruiz Minaya · Accepted Answer · 2020-04-12 01:53:56Z

This is a similar example and more complete:

var cadena_user_pais = ($(this).attr('id')).split("_");
var id_user_pais = cadena_user_pais[2];
var request = 'view_tipoNIF';
//tipo de NIF
        $.ajax({
            url: "fetch_single_users.php",
            method: "POST",
            data:{id_user_pais:id_user_pais,request:request},
            dataType: "json",
            success:function(data)
            {
                //alert('hola');
                var html='';
                $.each(data, function (key, value) {
                    html +='<option value="' + value.id + '">' + value.NIF + '</option>';
                });             
                $("#select_user_tipoNIF").append(html);
            }   //success
        });

Collectives™ on Stack Overflow

Append select box options dynamically with attributes

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Linked

Related