如何在选择框上获取值添加动态

Question

我正在尝试使一个动态选择框依赖于另一个，但是我想动态添加几个并选择各个值以便能够选择另一个。我尝试使用更改来做到这一点，但它只需要第一个选择，我想获取所选选择的值并设置另一个选择。谢谢你的帮助

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

您每次都在通过 $.each 循环重置 option = ""。除非所选选项与 listaModelos 中的最后一个元素匹配，否则您将无法获得所需的 <option> 值。

您应该在循环之前初始化变量。此外，您应该在找到所选选项时终止循环，因为继续搜索它没有意义。您可以通过从回调函数返回false 来终止$.each 循环。

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

下一个问题是这段代码：

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

这会将选项附加到所有.model 选择器，而不仅仅是当前.peca 之后的那个。将其更改为：

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

您还需要在change 事件处理程序中使用e.stopPropagation()。 bootstrap-select 插件将peca 类从<select> 复制到它添加的<div> 包装器，因此事件会冒泡到DIV，但$(this).val() 在那里不起作用。

Working fiddle