How to add the value of the id attribute and the text of a select from the click of a button event?

Question

I need to add to the object Select the Id and the Texto from that function:

//Adiciono o item retirado da table html para o objeto html Select
            $.each(_arrDescricao, function (text, key) {
                var option = new Option(key, text);
                $('.selListaItem').append($(option));
            });

the problem is I can only add the text, how do I add the Id in the Select?

This is the complete code:

$(document).on("click", ".btnRemoverItem", function (e) {
        e.preventDefault();

        var _arrId = new Array();
        var _arrDescricao = new Array();

        $("#tableHtml tbody").find('input[type="checkbox"]').each(function () {

            if ($(this).is(":checked")) {

                var _id = $(this).closest('tr').find('td[data-id]').data('id');
                var _descricao = $(this).closest('tr').find('td[data-descricao]').data('descricao');
                $(this).closest('tr').remove();

                _arrId.push(_id);
                _arrDescricao.push(_descricao);
            };

        });

        //Adiciono o item retirado da table html para o objeto html Select
        $.each(_arrDescricao, function (text, key) {
            var option = new Option(key, text);
            $('.selListaItem').append($(option));
        });       

    });

Answer 1

You can slightly change the structure that stores the ids and textos and add that way:

$("#tableHtml tbody").find('input[type="checkbox"]').each(function() {

    if ($(this).is(":checked")) {

        var _id = $(this).closest('tr').find('td[data-id]').data('id');
        var _descricao = $(this).closest('tr').find('td[data-descricao]').data('descricao');
        $(this).closest('tr').remove();

        _arr.push({
            id: _id,
            descricao: _descricao
        });
    };

});

//Adiciono o item retirado da table html para o objeto html Select
_arr.forEach(function(item) {
    $('.selListaItem').append("<option id=" + item.id + "value='foo'>" + item.descricao + "</option>");
});

Answer 2

You can store the id and Description in the same array and use it later. Following its same structure, I will call it _arrData.

_arrData.push({id: _id, descricao: _descricao});

Thus, the key becomes an object and not only the text. Thus you build the Option passing the id as value and descricao as text:

$.each(_arrData, function (text, key) {
  var option = new Option(key.descricao, key.id);
  $('.selListaItem').append($(option));
}); 

Complete code (Codepen):

$(document).on("click", ".btnRemoverItem", function (e) {
  e.preventDefault();

  var _arrData = new Array();

  $("#tableHtml tbody").find('input[type="checkbox"]').each(function () {

    if ($(this).is(":checked")) {

      var _id = $(this).closest('tr').find('td[data-id]').data('id');
      var _descricao = $(this).closest('tr').find('td[data-descricao]').data('descricao');
      $(this).closest('tr').remove();

      _arrData.push({id: _id, descricao: _descricao});
    };

  });

  //Adiciono o item retirado da table html para o objeto html Select
  $.each(_arrData, function (text, key) {
    var option = new Option(key.descricao, key.id);
    $('.selListaItem').append($(option));
  });       

});