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

Question

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

$(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 = ""。除非 selected 选项与 listaModelos 中的最后一个元素相匹配，否则您将无法获得所需的 <option> 值。

你应该在循环之前初始化变量。此外，当您找到 selected 选项时，您应该终止循环，因为继续搜索它没有意义。您可以通过从回调函数返回 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 select 选择器，而不仅仅是当前 .peca 之后的选项。将其更改为：

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

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

Working fiddle

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

how get value on selectbox add dynamic

javascript

jquery

bootstrap-selectpicker