Как привязать один select к другому select в javascript?

Question

У меня проблема. Есть два выпадающих списка. В одном автомобили(марка), в другом модель. Как сделать чтобы при выборе Ауди появлялся выпадающий список только моделей ауди, а при выборе Мерседес соответственно модели под мерседес. И чтобы в первом выпадающем списке если выбрана "марка автомобиля", то второй выпадающий список (с моделями) не появляется до тех пор пока не выберешь ауди или мерседес. Хелп.

Оч желательно чтобы без сторонних библиотек или без них не обойтись? Скрин прилагаю.

Answer 1

const trademarks = ['Audi', 'ВАЗ'];
const models = [
  ['Q7'],
  ['Kalina', 'Priora']
];
const fill = (id, options) => {
  const sel = document.getElementById(id), def = 0;
  sel.innerHTML = '';
  for (let i = 0; i < options.length; i++) {
    const opt = document.createElement('option');
    opt.value = i;
    opt.innerHTML = options[i];
    if (i === def) {
      opt.selectedIndex = i;
    }
    sel.appendChild(opt);
  }

  return def;
};

fill('model', models[fill('trademark', trademarks)]);

<select id="trademark" onchange="fill('model', models[this.selectedIndex])"></select>
<select id="model"></select>

БЛОГ НА HUSL

Как привязать один select к другому select в javascript?

Ответы (1 шт):