Показать сообщение отдельно
  #4 (permalink)  
Старый 18.01.2020, 18:36
Аватар для Esm1nec
Новичок на форуме
Отправить личное сообщение для Esm1nec Посмотреть профиль Найти все сообщения от Esm1nec
 
Регистрация: 18.03.2018
Сообщений: 8

Снимаю шляпу!

Мне тут ещё друг помог, делюсь другим для помощи!

var options = generateOptions();

document
  .querySelector(".chained-selects")
  .addEventListener("change", onChange, false);

function onChange(e) {
  e.stopPropagation();

  var s = e.target;

  if (!s.nextElementSibling) return;

  var next = s.nextElementSibling;

  if (s.selectedIndex === 0) deactivateBoxes(next);
  else {
    var path = [];
    for (var p = s; p; p = p.previousElementSibling) {
      var selOptNode = p.options[p.selectedIndex];
      path.push(selOptNode.value);
    }
    path.reverse();

    var children = path.reduce(function(o, optName) {
      return o[optName];
    }, options);

    let childrenNames = [];

    for (let key in children) {
      let obj = {
        name: key,
        params: children[key]
      };

      childrenNames.push(obj);
    }

    // Insert childrenNames in s.nextChild
    for (let q = next.firstElementChild.nextElementSibling; q; q = nextq) {
      nextq = q.nextElementSibling;
      next.removeChild(q);
    }
    for (let i = 0; i < childrenNames.length; ++i) {
      let optEl = document.createElement("option");
      let current = childrenNames[i];
      let { name, params } = current;
      optEl.innerHTML = name;

      if (params && params.url) {
        optEl.setAttribute('url', params.url);
      }

      next.appendChild(optEl);
    }

    next.selectedIndex = 0;
    next.disabled = false;

    deactivateBoxes(next.nextElementSibling);
  }
}

function deactivateBoxes(s) {
  while (s) {
    s.selectedIndex = 0;
    s.disabled = true;

    s = s.nextElementSibling;
  }
}

function generateOptions() {
  return {
    audi: {
      "audi model 1": {
        "audi model 1 url 1": {
          url: "https://google.com"
        },
        "audi model 1 url 2": {
          url: "https://yandex.ru"
        }
      },
      "audi model 2": {
        "1-2-1": null,
        "1-2-2": null,
        "1-2-3": null,
        "1-2-4": null
      },
      "audi model 3": {
        "1-3-1": null,
        "1-3-2": null,
        "1-3-3": null,
        "1-3-4": null,
        "1-3-5": null
      }
    },
    "2": {
      "2-1": {
        "2-1-1": null,
        "2-1-2": null
      },
      "2-2": {
        "2-2-1": null,
        "2-2-2": null,
        "2-2-3": null,
        "2-2-4": null
      },
      "2-3": {
        "2-3-1": null,
        "2-3-2": null,
        "2-3-3": null,
        "2-3-4": null,
        "2-3-5": null
      }
    },
    "3": {
      "3-1": {
        "3-1-1": null,
        "3-1-2": null
      },
      "3-2": {
        "3-2-1": null,
        "3-2-2": null,
        "3-2-3": null,
        "3-2-4": null
      },
      "3-3": {
        "3-3-1": null,
        "3-3-2": null,
        "3-3-3": null,
        "3-3-4": null,
        "3-3-5": null
      }
    }
  };
}

var urlDropdownRef = document.querySelector("#select-3");
urlDropdownRef.addEventListener("change", onUrlDropdownChange);

function onUrlDropdownChange(e) {
  e.stopPropagation();

  let { target } = e;
  let { options, selectedIndex } = target;
  let selectedElem = options[selectedIndex];
  let url = selectedElem.getAttribute('url');

  if (url) {
    redirect(url);
  }
}

function redirect(url) {
  window.location.assign(url);
}
Ответить с цитированием