how get value on selectbox add dynamic

Question

I'm trying to make a dynamic select box one depends on the other, however I want to add several dynamically and pick up the individual values ​​to be able to select the other one. I tried to do it using the change but it only takes the first select, I wanted to get the value of the selected select and set the other select. Thank you for your help

$(function() {
  var listaPecas = [{
      "Tipo_PecaID": 1,
      "Descricao": "impressora"
    },
    {
      "Tipo_PecaID": 2,
      "Descricao": "teclado"
    },
    {
      "Tipo_PecaID": 3,
      "Descricao": "notebook"
    },
  ];
  var listaModelos = [{
      "id_peca_modelo": 1,
      "Tipo_PecaID": "1",
      "ds_descricao": "epson"
    },
    {
      "id_peca_modelo": 2,
      "Tipo_PecaID": "2",
      "ds_descricao": "asus"
    },
    {
      "id_peca_modelo": 3,
      "Tipo_PecaID": "3",
      "ds_descricao": "microsoft"
    },
  ];


  $(document).on('change', '.peca', function(e) {
    e.preventDefault();
    $('.selectpicker.form-control.peca').each(function() {
      id = $(this).val();
      $.each(listaModelos, function(indexInArray, modelo) {
        option = "";
        if (id == modelo.Tipo_PecaID) {
          option = '<option value="' + modelo.id_peca_modelo + '">' + modelo.ds_descricao + '</option>'
        }
      });

      $('.selectpicker.form-control.model').append(option);
      $('.selectpicker.form-control.model').selectpicker('refresh');
    });
  })
});

function adicionarPeca(listaPecas) {
  div = '<div class="row seletor-select">';
  div += '<div class="col-md-3">';
  div += '<select class="selectpicker form-control peca" name="peca" data-live-search="true">';
  $.each(listaPecas, function(indexInArray, peca) {
    div += '<option value="' + peca.Tipo_PecaID + '">' + peca.Descricao + '</option>'
  });
  div += '</select>';
  div += '</div>';
  div += '<div class="col-md-3">';
  div += '<select class="selectpicker form-control model" name="model" data-live-search="true">';
  div += '</select>';
  div += '</div>';
  div += '<div class="col-md-2">';
  div += '<div class="form-group">';
  div += '<input type="text" name="porta" class="form-control" value="">';
  div += '</div>';
  div += '</div>';
  div += '<div class="col-md-1">';
  div += '<div class="form-group">';
  div += '<button type="button" class="btn btn-danger RemoveLinha">-</button>';
  div += '</div>';
  div += '</div>';
  $("#lista.row").append(div);
  div += '</div>';
  $("#lista").append(div);

  $('.selectpicker').selectpicker();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="lista"></div>

Answer 1

You're resetting option = "" each time through the $.each loop. Unless the selected option matches the last element in listaModelos, you won't get the <option> value that you want.

You should should initialize the variable before the loop. Also, you should terminate the loop when you find the selected option, since there's no point in continuing to search for it. You can terminate the $.each loop by returning false from the callback function.

  var option = "";
  $.each(listaModelos, function(indexInArray, modelo) {
    if (id == modelo.Tipo_PecaID) {
      option = '<option value="' + modelo.id_peca_modelo + '">' + modelo.ds_descricao + '</option>';
      return false;
    }
  });

The next problem is this code:

  $('.selectpicker.form-control.model').append(option);
  $('.selectpicker.form-control.model').selectpicker('refresh');

This appends the option to all the .model selectpickers, not just the one after the current .peca. Change that to:

$(this).closest(".row").find(".selectpicker.form-control.model")
    .append(option)
    .selectpicker('refresh');

You also need to use e.stopPropagation() in the change event handler. The bootstrap-select plugin copies the peca class from the <select> to the <div> wrapper that it adds, so the event bubbles out to the DIV, but $(this).val() doesn't work there.

Working fiddle