Три зависимых списка

24 августа 2019, 10:20

Есть рабочий код:

var users = Array('-', 'Olya', 'Vasya'); 
var admins = Array('-', 'Babuin', 'Org'); 
 
function showNames(v) { 
  var mas = eval(v); 
  var el = document.getElementById('names'); 
 
  while (el.childNodes.length > 0) { 
    el.removeChild(el.childNodes[el.childNodes.length - 1]); 
  } 
 
  for (var i = 0; i < mas.length; i++) { 
    var opt = document.createElement("option"); 
    opt.innerHTML = mas[i]; 
    el.appendChild(opt); 
  } 
}

<select id="level" onchange="showNames(this.value)"> 
  <option value="admins">ADMIN</option> 
  <option value="users">USER</option> 
</select> 
<select id="names"> 
</select>

Подскажите как корректнее его дописать с добавлением третьего списка.

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

Заранее благодарю.

Answer 1

Я бы посоветовал обобщить функцию showNames, и передавать ей 2 параметра, первый - значение, а второй - id изменяемого селекта.

var optionsData = { 
  users: ['-', 'Оля Белова', 'Вася Белов'], 
  admins: ['-', 'Babuin', 'Org'], 
  'Оля Белова': ['-', '--', '---'], 
  'Вася Белов': ['+', '++', '+++'], 
  Babuin: ['-', '--', '---'], 
  Org: ['+', '++', '+++'] 
}; 
 
function showNames(v, id) { 
  var mas = optionsData[v] || []; 
  var el = document.getElementById(id); 
 
  el.innerHTML = ''; 
  el.dispatchEvent(new Event('change')); 
 
  for(var i = 0; i < mas.length; i++) { 
    var opt = document.createElement('option'); 
    opt.innerHTML = mas[i]; 
    opt.value = mas[i]; 
    el.appendChild(opt); 
  } 
}

<select id="level" onchange="showNames(this.value, 'names')"> 
    <option value="admins">ADMIN</option>  
    <option value="users">USER</option> 
</select> 
 
<select id="names" onchange="showNames(this.value, 'other')"></select> 
<select id="other"></select>