как свернуть optgroup в select?
Делаю выбор города через select . Города разбиты в группы по регионам optgroup. Но список получается просто огромным, есть ли возможность свернуть все группы до названия и разворачивать группу, только при клике мышкой?
пример селекта <select name="select_projects" id="select_projects"> <option value="">project.xml</option> <optgroup label="client1"> <option value="">project2.xml</option> </optgroup> <optgroup label="client2"> <option value="">project5.xml</option> <option value="">project6.xml</option> <optgroup label="client2_a"> <option value="" style="margin-left:23px;">project7.xml</option> <option value="" style="margin-left:23px;">project8.xml</option> </optgroup> <option value="">project3.xml</option> <option value="">project4.xml</option> </optgroup> <option value="">project0.xml</option> <option value="">project1.xml</option> </select> мой список городов тут http://jsfiddle.net/wu1upn0e/2/ |
или как-то прикрутить к нему input, чтобы пишешь в нем "мо", а он в селекте показывает города на "мо" ?
|
|
Спасибо, Рони. Твой код работает но с моим длинным списком он так тормозит, что пару раз ie даже вылетал http://jsfiddle.net/wu1upn0e/4/
|
хотя хром и ff просто летают.... как так?
|
sovsem-nub,
что делает ? var r = /\\u([\d\w]{4})/gi; x = x.replace(r, function (match, grp) { return String.fromCharCode(parseInt(grp, 16)); } ); |
Быстрый поиск по селекту
sovsem-nub,
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Быстрый поиск по селекту</title> <script> window.onload = function() { var XHR = "onload" in new XMLHttpRequest ? XMLHttpRequest : XDomainRequest; var xhr = new XHR; xhr.open("GET", "http://pecom.ru/ru/calc/towns.php", true); xhr.onload = function() { var x = this.responseText; x = JSON.parse(x); var sel = document.querySelector("#select_projects"), inp = document.querySelector('[name="opt"]'); function createSelect(val) { var fragment = document.createDocumentFragment(); var reg = new RegExp("^" +val, "ig"); Object.keys(x).forEach(function(key) { var optgroup = document.createElement("optgroup"); optgroup.setAttribute("label", key); var op = x[key]; Object.keys(op).forEach(function(key) { var text = op[key]; if (!val || reg.test(text)) { var option = new Option(text, key); optgroup.appendChild(option) } reg.lastIndex = 0; }); optgroup.children.length && fragment.appendChild(optgroup) }); sel.innerHTML = ""; sel.appendChild(fragment) } createSelect(); inp.addEventListener("input", function() { createSelect(this.value) }) }; xhr.onerror = function() { alert("Ошибка " + this.status) }; xhr.send() }; </script> </head> <body> <form action="http://" name="f"> <input type="text" name="opt"> <select name="name_ob" id="select_projects"> </select> </form> </body> </html> |
sovsem-nub,
не лучше ли ajax запрос регионов и получение списка их городов? С ростом аппетита разрастется все, а таскать большие списки на клиента не лучшее решение. Есть и готовое API по КЛАДР. |
рони, Вы весь код переделали. Спасибо. Даже города в группах оставили.... /\\u([\d\w]{4})/gi действительно оказалось не нужно. Просто я в начале json alert ом выводил и там абра-кадабра была, а этот код ее в русский текст превращал.
laimas, пытаюсь к своему магазину на js прикрутить рассчет доставок от разных транспортных компаний. (пэк, деловые линии и почта России) у каждой своя кодировка городов и доставка есть не в каждый город. Мало готовых примеров и я не знаю как поступают в этом случае. Я планировал слить справочники из трех компаний в один селект (будет огромен) в таком виде: Тула [Пэк] , Тула [Почта России] ,Тула [Деловые линии]. соответственоо покупатель вводит в инпут Рони свой город Тула и в селекте остаются Три Тулы с разными вариантами Транспортных компаний. Он выбирает одну из и жмет кнопку "рассчитать". Код считывает текст между [] и отправляет на расчет в нужную компанию. Это нормальный подход или очередной велосипед? |
Все зависит от размера, при большом размере выгоднее получать ajax запросом. И это будет тоже самое поле ввода по принципу "живого поиска".
|
у каждой транспортной компании свой API. у ПэК можно список только через GET получить и только целиком, а у деловых линий публичный без ключа идет только jsonp и только можно букву города отправить, целиком список получить нельзя. и примеров на js они не дают.
вот тут список для деловых линий сделал http://jsfiddle.net/4fbej3Lp/5/ |
Погодите, речь ведь шла о мой список городов, а откуда и какими путями вы его получаете, это не обсуждается. Если задаться целью составления такового, то это таки сделать можно, предварительно или в процессе работы, давая возможность пользователю делать ввод "Другой". Это конечно потребует проверки, но при желании таковую сделать можно.
Речь ведь шла о том впихивать ли клиенту сразу весь список и пусть в нем ковыряется, либо получать нужное по запросу сервера, и при большом списке последнее конечно предпочтительнее. Но правильно ли будет ввод города, это тоже вопрос. Если ваш список городов, это крупные города, в котором маловероятны "тезки" тогда да, в противном случае будет неоднозначность. Да и запросить Тулу, и получить в итоге Тула [Пэк] , Тула [Почта России] ,Тула [Деловые линии] может лучше не пряча в список, а выбор радио кнопками. |
Часовой пояс GMT +3, время: 19:39. |