Как получить значение на выборку добавить динамический - PullRequest
Новая
       9

Как получить значение на выборку добавить динамический

0 голосов
/ 19 января 2019

Я пытаюсь сделать поле динамического выбора одно зависимым от другого, однако я хочу добавить несколько динамически и подобрать отдельные значения, чтобы иметь возможность выбрать другое. Я пытался сделать это, используя изменения, но это только первый выбор, я хотел получить значение выбранного выбора и установить другой выбор. Спасибо за вашу помощь 

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

1 Ответ

0 голосов
/ 19 января 2019

Вы сбрасываете 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, а не только к одному после текущего .peca. Измените это на: 

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

Вам также необходимо использовать e.stopPropagation() в обработчике событий change. Плагин bootstrap-select копирует класс peca из <select> в добавляемую оболочку <div>, поэтому событие выдается в DIV, но $(this).val() там не работает.

Рабочая скрипка

...