Динамическая форма зависимый выпадающий массив - PullRequest
Новая
       8

Динамическая форма зависимый выпадающий массив

0 голосов
/ 23 сентября 2018

Я нашел решение, поэтому я делюсь кодом для запуска динамической формы с зависимыми списками (заполненный минимальный массив) в каждой строке.

Working Fiddle 

jQuery(function($) {
 var i = parseInt($("tr:last td:first").attr("id"));
 $("#add").on("click", function (e) {
  i++;
  var tr = '<tr id="row'+i+'">'+
   '<td><select class="custom-select form-control form-control-sm typ" id="typ'+i+'" name="typ[]"><option value="" selected="selected">Sélectionner</option></select></td>'+
   '<td><select class="custom-select form-control form-control-sm mdl" id="mdl'+i+'" name="mdl[]"><option value="" selected="selected">Sélectionner</option></select></td>'+
   '<td><input type="text" class="form-control form-control-sm" name="cod[]" placeholder="Code barre"></td>'+
   '<td><button type="button" class="btn btn-sm btn-danger btn_remove" id="'+i+'"><i class="fa fa-times" aria-hidden="true"></i></button></td>'+
   '<td>'+i+'</td>'+
   '</tr>';
  $("#materiel").append(tr);
  var tbl_row = $(this).closest('tr');
  var id = i;
  $('#ndx').val(id);
  loadmat(id);
 });
 $(document).on('click', '.btn_remove', function(){  
  var button_id = $(this).attr("id");   
  $('#row'+button_id+'').remove();  
 });
});
$(document).ready(function() {
 var typ = document.getElementById("typ1"),
  mdl = document.getElementById("mdl1");
 for (var vtyp in matObject) {
  typ.options[typ.options.length] = new Option(vtyp, vtyp);
 }
 typ.onchange = function () {
  mdl.length = 1;
  if (this.selectedIndex < 1) return;
  var vmdl = matObject[this.value];
  for (var i = 0; i < vmdl.length; i++) {
   mdl.options[mdl.options.length] = new Option(vmdl[i], vmdl[i]);
  }
 }
});
function loadmat(id) {
 var typ = document.getElementById('typ'+id),
 mdl = document.getElementById('mdl'+id);
 for (var vtyp in matObject) {
  typ.options[typ.options.length] = new Option(vtyp, vtyp);
 }
 typ.onchange = function () {
  mdl.length = 1;
  if (this.selectedIndex < 1) return;
  var vmdl = matObject[this.value];
  for (var i = 0; i < vmdl.length; i++) {
   mdl.options[mdl.options.length] = new Option(vmdl[i], vmdl[i]);
  }
 }
}

Я нашел лучшее решение, более чистое и удобочитаемое, поэтому я делюсь им с другими. Спасибо!

...