Раскрывающийся список внутри select-а?

11 Июл
2012

Доброго времени суток блоговчане.

Задача:
Имеем для примера небольшой список стран, Россия и Казахстан, в каждой из стран есть регионы и области.
В зависимости от выбранной страны надо показать список регионов и областей.
Использование JavaScript приветствуется.
Размышления:
Данная задача легко реализуется использованием нескольких select-ов, но хотелось бы реализовать это в одном select.
Решил сначала воспользоваться тегом optgroup, используя JavaScript скрывать список внутри этого контейнера в итоге скрыть легко, но повесить событие onClick на контейнер после этого не удается(возможно что-то неправильно делаю). Вот пример(использую jQuery):
<select name="select-group">
    <optgroup label="Россия" id="group-rus">
        <option value="1">Екатеринбург</option>
        <option value="2">Москва</option>
        <option value="3">Пермь</option>
    </optgroup>
    <optgroup label="Казахстан" id="group-kzt">
        <option value="4">Астана</option>
        <option value="5">Алма-Аты</option>
    </optgroup>
</select>

    $('optgroup[id^="group"]').addClass('hid').children().hide();

После чего решил выдавать одним списком(визуально выделив страны) и с ним работать:
<select name="select-group">
    <option id="optgroup-rus" style="font-weight:bold;color:#333;" disabled">Россия +</option>
    <option value="c1">   Екатеринбург</option>
    <option value="c2">   Москва</option>
    <option value="c3">   Пермь</option>
    <option id="optgroup-kzt" style="font-weight:bold;color:#333;" disabled">Казахстан +</option>
    <option value="s1">   Астана</option>
    <option value="s2">   Алма-Аты</option>
</select>

Немного а может даже очень корявый, но работающий код.
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх