динамический c зависимый раскрывающийся список в jquery - PullRequest
Новая
       14

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

0 голосов
/ 20 июня 2020

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

Я написал образец кода, и он работает, но я считаю, что есть лучший способ сделать так. Сначала есть array(Obj) для хранения данных для каждого раскрывающегося списка в зависимости от выбранного элемента. id для раскрывающегося списка в этом примере - #1,#2,#3 .... Щелкнув каждый элемент, он получит индекс раскрывающегося списка и установит индекс newDropdown. Затем есть набор if logi c, чтобы проверить наличие второго раскрывающегося списка. В конце, если родительский раскрывающийся список изменен, остальные раскрывающиеся списки должны быть удалены, кроме первого дочернего.

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

$('body').on('click', '.combo', function() {

  var selectedValue = $(this).val();
  //alert(this.id);
  if (this.id < objs) {
    var childVal = obj[this.id][selectedValue];
  }
  //get the index of current combobox
  var thisComboBoxIndex = parseInt($(this).attr('data-index'), 10);
  // set the index of new combobox
  var newComboBoxIndex = thisComboBoxIndex + 1;
  var id = newComboBoxIndex
    
  //if we clicked on the dropdown and dropdown already exists:
  // then just update dropdown items
  if ($("#" + id).length && childVal) {
    jQuery('#' + id).children().remove();
    jQuery.each(childVal, function(val, text) {
      jQuery('#' + id).append(
        jQuery('<option></option').val(val).html(text)
      );
    })
  }
  
  //if dropdown does not exists:
  //then add the dropdown
  if ($("#" + id).length == 0 && childVal) {

    jQuery('body').append('<select class= "combo" data-index="' + newComboBoxIndex + '" id="' + id + '"></select>');
    jQuery.each(childVal, function(val, text) {
      jQuery('#' + id).append(
        jQuery('<option></option').val(val).html(text)
      );
    })
  }

    //if there's no value, then remove dropdown
  if ($("#" + id).length && !childVal) {
    jQuery('#' + id).remove();

  }
  //if we changed the item of parent, remove the children
  if (this.id >= 0) {
    var id_changed_combo = this.id;
    // Gets the number of elements with class .combo
    var numItems = $('.combo').length
    $(".combo").each(function(index, element) {
      if (index > (parseInt(id_changed_combo) + 1)) {
        jQuery('#' + index).remove();
      }
    });

  }

});
...