как свернуть 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 запросом. И это будет тоже самое поле ввода по принципу "живого поиска".
|
| Часовой пояс GMT +3, время: 09:30. |