Зависимые списки (select) на основе данных JSON
Всем привет! Очень нужна помощь. Принимаю от устройства пакет JSON такого формата:
[ { "{{e1}}":[{"{{c1}}":"1", ... ,"{{cN}}":"5"}], ... "{{eN}}":[{"{{c1}}":"1", ... ,"{{cN}}":"5"}] } ] В объекте находятся элементы {{e}}, каждый со своим массивом. Реализованы зависимые элементы select. В первом select - все названия ключей от {{e1}} до {{eN}} Во втором select - все названия ключей от {{c1}} до {{cN}} со значением value соответствующего {{c}} (в зависимости от выбранного {{e}}) Ниже по форуму организована реализация. Возникли некоторые дополнения: - Почему то не работает, если включить переводчик (LangTranslation(dicTrans);) |
mcmega,
зачем два раза получать одно и тоже? в чём проблема создать селектор? |
Цитата:
2. Проблема не в создании select, а в том, как добавлять элементы option в select в соответствии с данными из json динамически в зависимости от выбранного Event-а |
mcmega,
1. если функции на 99% совпадают, значит нужна одна с дополнительным параметром, а может и его ненадо, но дело ваше, сколько функций. 2. есть обьект с данными - есть ключ первого селектора -- выбрали по ключу данные -- создали второй селектор |
Цитата:
Теория мне понятна и логична, я не знаю как это реализовать |
mcmega,
а так нельзя сделать? function loadAPI(cnt,num){var apiData=JSON.parse(xhttp.responseText)[num];} |
Цитата:
А что дальше делать, как создать селект с именами ключей и добавить 2-ой зависимый селект? |
зависимые селекты из json
mcmega,
медитируйте ... <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> </head> <body> <div class="demo"></div> <div class="show"></div> <script> var apiData = [{"В" : [{ "кричалки" : 5, "дразнилки" : 8 }], "голове" : [{}], "моей" : [{}], "опилки" : [{}]}, {"Сочиняю" : [{ "Шумелки" : 15, "пыхтелки" : 18, "сопелки" : 34}], "я" : [{}], "неплохо" : [{}], "иногда" : [{}]} ]; function set_select(select, data) { select.options.length = 0; Object.keys(data).forEach(function(key, k) { var value = typeof data[key] == "object" ? key : data[key]; select.options[k] = new Option(key, value) }) } function createS(selector, obj) { selector = document.querySelector(selector); var sel = document.createElement("select"); var selTwo = sel.cloneNode(); set_select(sel, obj); selector.appendChild(sel); selector.appendChild(selTwo); function test() { alert(this.value) } function change_select() { set_select(selTwo, obj[this.value][0]); test.bind(selTwo)() } sel.addEventListener("change", change_select); selTwo.addEventListener("change", test); change_select.bind(sel)() }; createS(".demo", apiData[0]) createS(".show", apiData[1]) </script> </body> </html> |
Круто, все заработало, спасибо огромное!
Скажите, а как сделать чтоб при повторном вызове createAPISelect не создавался новый селектор, а менялся текущий? |
mcmega,
<!doctype html> <html> <head> <title>Test</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <input value="Events" class="btn w45" onclick="createAPISelect('#eve', api[0]);" type="button"> <input value="Actions" class="btn w45" onclick="createAPISelect('#act', api[1]);" type="button"> <div id="eve"></div> <div id="act"></div> </body> <script type="text/javascript"> var api = [ { "{{e1}}":[{"{{c1}}":"1","{{c2}}":"2","{{c3}}":"3"}],"{{e2}}":[{"{{c1}}":"1","{{c2}}":"2","{{c3}}":"3"}] }, { "{{a1}}":[{"{{o1}}":"1","{{o2}}":"2","{{o3}}":"3"}],"{{a2}}":[{"{{o1}}":"1","{{o2}}":"2","{{o3}}":"3"}] } ]; // Загрузка API устройства function setSelect(sel,obj){ sel.options.length=0; Object.keys(obj).forEach(function(key,k){ var value=typeof obj[key]=='object' ? key : obj[key]; sel.options[k]=new Option(key,value); }) } function createAPISelect(id,obj){ var parEl=document.querySelector(id); var select = parEl.querySelectorAll('select') var sel = select.length ? select[0] : document.createElement('select'); var selTwo = select.length == 2 ? select[1] : sel.cloneNode(); setSelect(sel,obj); parEl.appendChild(sel); parEl.appendChild(selTwo); function changeSelect(){setSelect(selTwo,obj[this.value][0]);} sel.addEventListener('change',changeSelect); changeSelect.bind(sel)(); //load(); } </script> </html> |
Часовой пояс GMT +3, время: 23:49. |