Рекурсивное заполнение полей выбора опциями из массива JavaScript / jQuery - PullRequest
Новая
       3

Рекурсивное заполнение полей выбора опциями из массива JavaScript / jQuery

0 голосов
/ 28 января 2020

У меня есть некоторые данные в объекте JavaScript, и мне нужно рекурсивно вставить их в поля выбора. Проблема в том, что исходная страница не загружается через AJAX et c., Но загружает все данные напрямую в DOM. Поэтому до загрузки страницы мы не знаем, сколько будет дочерних уровней, поэтому необходим рекурсивный алгоритм

Пожалуйста, рассмотрите следующий пример: 

$(document).ready(function() {
  var jsonData = {
    "1": {
      "uid": 1,
      "value": "foo1",
      "label": "FOO1",
      "children": {
        "2": {
          "uid": 2,
          "value": "foo1a",
          "label": "FOO1a",
          "parent": 1
        },
        "3": {
          "uid": 3,
          "value": "foo1b",
          "label": "FOO1b",
          "parent": 1
        },
        "4": {
          "uid": 4,
          "value": "foo1c",
          "label": "FOO1c",
          "parent": 1
        }
      }
    },
    "5": {
      "uid": 5,
      "value": "foo2",
      "label": "FOO2",
      "children": {
        "6": {
          "uid": 6,
          "value": "foo2a",
          "label": "FOO2a",
          "parent": 5,
          "children": {
            "7": {
              "uid": 7,
              "value": "foo2a1a",
              "label": "FOO2a1a",
              "parent": 6,
              "children": {
                "8": {
                  "uid": 8,
                  "value": "foo2a1a1a",
                  "label": "FOO2a1a1a",
                  "parent": 7
                }
              }
            }
          }
        }
      }
    }
  };

  // works only for the 1st select field for now...
  // should fill the other fields with children options dependent on the selection in the 1st field
  $(jsonData).each(function() {
    $.each(jsonData, function(i) {
      $('#singleselect-subject-1').append(
        '<option value="' + jsonData[i].value + '" ' +
        '        data-uid="' + jsonData[i].uid + '">' + jsonData[i].label +
        '</option>'
      );
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select optiondatasource="singleselect-subject-data" optiondatasourcefieldposition="1" id="singleselect-subject-1"></select>
<select optiondatasource="singleselect-subject-data" optiondatasourcefieldposition="1" id="singleselect-subject-2"></select>
<select optiondatasource="singleselect-subject-data" optiondatasourcefieldposition="1" id="singleselect-subject-3"></select>

У вас есть идея, как заставить эту рекурсию в JavaScript работать? jQuery3 присутствует в проекте и, таким образом, может (и должен) использоваться, где это возможно и где это имеет смысл. Спасибо!

...