Форум

sovsem-nub · #1 (**permalink**) 05.11.2015, 17:25

Делаю выбор города через 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/

sovsem-nub · #2 (**permalink**) 05.11.2015, 17:52

или как-то прикрутить к нему input, чтобы пишешь в нем "мо", а он в селекте показывает города на "мо" ?

рони · #3 (**permalink**) 05.11.2015, 18:28

sovsem-nub,
html select быстрый выбор

sovsem-nub · #4 (**permalink**) 05.11.2015, 19:32

Спасибо, Рони. Твой код работает но с моим длинным списком он так тормозит, что пару раз ie даже вылетал http://jsfiddle.net/wu1upn0e/4/

sovsem-nub · #5 (**permalink**) 05.11.2015, 19:34

хотя хром и ff просто летают.... как так?

рони · #6 (**permalink**) 05.11.2015, 21:17

sovsem-nub,
что делает ?

var r = /\\u([\d\w]{4})/gi;
x = x.replace(r, function (match, grp) {
    return String.fromCharCode(parseInt(grp, 16)); } );

рони · #7 (**permalink**) 05.11.2015, 21:37

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>

laimas · #8 (**permalink**) 05.11.2015, 21:56

sovsem-nub,

не лучше ли ajax запрос регионов и получение списка их городов? С ростом аппетита разрастется все, а таскать большие списки на клиента не лучшее решение. Есть и готовое API по КЛАДР.

sovsem-nub · #9 (**permalink**) 06.11.2015, 13:09

рони, Вы весь код переделали. Спасибо. Даже города в группах оставили.... /\\u([\d\w]{4})/gi действительно оказалось не нужно. Просто я в начале json alert ом выводил и там абра-кадабра была, а этот код ее в русский текст превращал.
laimas, пытаюсь к своему магазину на js прикрутить рассчет доставок от разных транспортных компаний. (пэк, деловые линии и почта России) у каждой своя кодировка городов и доставка есть не в каждый город. Мало готовых примеров и я не знаю как поступают в этом случае.
Я планировал слить справочники из трех компаний в один селект (будет огромен) в таком виде: Тула [Пэк] , Тула [Почта России] ,Тула [Деловые линии]. соответственоо покупатель вводит в инпут Рони свой город Тула и в селекте остаются Три Тулы с разными вариантами Транспортных компаний. Он выбирает одну из и жмет кнопку "рассчитать". Код считывает текст между [] и отправляет на расчет в нужную компанию. Это нормальный подход или очередной велосипед?

laimas · #10 (**permalink**) 07.11.2015, 10:50

Все зависит от размера, при большом размере выгоднее получать ajax запросом. И это будет тоже самое поле ввода по принципу "живого поиска".

Форум

Справочник

Discord чат

Курсы javascript