使用属性

Question

我需要在我的选择框选项中附加额外的数据。这是我的代码。

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

所以我可以添加值和文本，但我想将属性附加到此附加选项 喜欢

data-marks = value.mark

所以我的预期结果就像

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

我该怎么做？ 感谢。

Answer 1

您可以使用解决方案https://jsfiddle.net/u5vek2jc/

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将data属性添加到您生成的HTML中。另请注意，您可以修改逻辑，以便DOM只更新一次，而不是在每次迭代中更新。试试这个：

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

Answer 3

迭代您的数据以创建选项，然后将其附加到您的选择元素

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

Answer 4

这是一个类似的示例，更加完整：

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