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

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

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

  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选择器 all 中，而不仅仅是当前.peca之后的选择器。将其更改为：

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

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

Working fiddle

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

1 个答案: