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

Question

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

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I need to add in the object Select o Id and Texto from this 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 that I can only add text , how do I add Id to Select ? Home 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));
        });       

    });

html jquery

asked by anonymous 18.10.2017 / 15:16

2 answers

1

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

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

In this way, key becomes an object, not just the text. So you build Option by passing id as value and descricao as text :

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

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

});

18.10.2017 / 15:35

Dropdown Menu Items do not change color [closed] How to Change IFs to For

score 1 · Accepted Answer

You can change the structure that stores ids and textos and add it like this:

$("#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>");
});