динамическое добавление уникальных options в select

191

28 августа 2018, 23:00

Ситуация следующая. Есть массив объектов (маркеры для карты). нужно сделать три, появляющихся друг за другом по мере выбора в каждом, выпадающих списка:

Район,
Округ,
Адреса...

все сделал, но не могу разобраться, как поставить проверку, чтобы в списках не было повторяющихся элементов.

function onchange_sel_ao() { 
  var aoSelObj = document.getElementById('sel_ao'); 
  var mo_container = document.getElementById('mo_container'); 
  var next_sel = document.getElementById('next_sel'); 
  var current_ao = aoSelObj.value; 
  if (current_ao == "") { 
    mo_container.style.display = "none"; 
  } else { 
    var sel_mo = document.getElementById('sel_mo'); 
    var devElm = sel_mo.options; 
    for (var i = sel_mo.options.length - 1; i > 0; i--) devElm.remove(i); 
    var markersLen = markers.length; 
    var moSelLen = sel_mo.length; 
    for (var j = 0; j < markersLen; j++) { 
      var t = markers[j]; 
      //  var arr = jQuery('[name=mo] > option').toArray(); 
      if (current_ao == t.properties.ao) 
        sel_mo.options[moSelLen++] = new Option(t.properties.mo, t.properties.mo); 
    } 
  } 
}

<select id="sel_ao" name="ao" onchange="onchange_sel_ao();"> 
  <option selected disabled hidden>Выберите округ</option> 
  <option value="Центральный">Центральный</option> 
  <option value="Западный">Западный</option> 
  <option value="Юго-Западный">Юго-Западный</option> 
  <option value="Южный">Южный</option> 
  <option value="Юго-Восточный">Юго-Восточный</option> 
  <option value="Восточный">Восточный</option> 
  <option value="Северо-Восточный">Северо-Восточный</option> 
  <option value="Северный">Северный</option> 
  <option value="Северо-Западный">Северо-Западный</option> 
</select> 
<div id="mo_container"> 
  <select id="sel_mo" name="mo" onchange="onchange_sel_mo();"> 
    <option selected disabled hidden>Выберите район</option> 
  </select> 
</div> 
<div id="marker_container"> 
  <select id="sel_marker" name="marker" onchange="onchange_sel_marker(this);"> 
    <option selected disabled hidden>Выберите объект</option> 
  </select> 
</div>

Буду невероятно признателен, если подскажите как реализовать проверку, а так же укажите на "косяки" в коде, так как я только начал обучение в этом направлении...

P.S. извините, если кому-то поломал глаза своим корявым кодом=)

Answer 1

Простите, не до конца понял поставленной задачи из имеющегося описания, но могу дать совет, что удобно добавлять новые элементы и отслеживать дубликаты можно через прокси-массив с данными:

let container=$('#select'),
selects=new Proxy([],{
  set(array,key,value,proxy){
    if(array.includes(value)) return
    array[key]=value
    $('<option>',{value}).text(value).appendTo(container)
  }
})
selects.push('Район')