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

Asked

Viewed 45 times

0

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

    });
jquery html

  • I still don’t understand your doubt, you want to put together a list of options of a select with a certain ID and certain TEXT (value)?

  • That’s right! I already have the id = _id and the text = _descricao.

2 answers

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>");
});
  • 1

    Thank you! , it worked!

1

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

});
  • 1

    Thank you! @Guilherme IA!

Browser other questions tagged jquery html

You are not signed in. Login or sign up in order to post.