The situation is as follows. There is an array of objects (markers for the map). you need to make three that appear one after another as you select each in the drop-down lists:

  1. Area,
  2. District,
  3. Addresses ...

I did everything, but I can’t figure out how to put a check so that there are no duplicate items in the lists.

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>

I would be incredibly grateful if you tell me how to implement the check, as well as point out the "jambs" in the code, since I just started learning in this direction ...

PS Sorry if someone broke his eyes with his clumsy code =)

  • uniqueness can be checked for example by loading the library lodash lodash.com/docs/4.17.10#uniq - Dmitry Kozlov
  • And where do you get the list from? - Anton Shchyrov
  • @AntonShchyrov, from an array of objects. var markers = [{ "type": "Feature", "properties": { "address": "...", "mo": "Арбат", "ao": "Центральный" }, "geometry": { "type": "Point", "coordinates": [37.597890,55.752151] } }, "ao" - district, "mo" - district, for the second drop-down list - var markers = [{ "type": "Feature", "properties": { "address": "...", "mo": "Арбат", "ao": "Центральный" }, "geometry": { "type": "Point", "coordinates": [37.597890,55.752151] } },
  • Is the array of objects hard-packed into the code? - Anton Shchyrov
  • @AntonShchyrov, unfortunately, yes) - Andrew Timofeev

1 answer 1

Sorry, I didn’t fully understand the task from the existing description, but I can advise that it is convenient to add new elements and track duplicates through a proxy array with data:

 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('Район')

http://jsfiddle.net/8u73xtrp/13/