Какое событие лучше всего использовать для переинициализации динамических select-ов?

Тема в разделе "JavaScript", создана пользователем verfaa, 13 апр 2013.

Модераторы: ZiX
  1. verfaa

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    374
    Симпатии:
    41
    На страничке присутствуют 3 селекта - страна, регион и город.
    Когда пользователь загружает страницу, из БД подгружаются страны. А селекты с регионами и городами остаются пустыми.
    Затем, если пользователь выбирает страну из БД подгружаются регионы, выбирает регион - подгружаются города.

    Хочу подключить на страницу вот этот jquery-плагин Перейти по ссылке

    После подключения плагина к сайту, он заработал для стран, а вот для динамически подключаемых городов и регионов нет. Очевидно, после подгрузки городов и регионов их нужно переинициализировать заново. Только вот как? Перепробовав несколько вариантов, у меня заработал следующий:

    Код:
    $(document).ready(function() {
              $(".chzn-select").chosen();
     
              $(window).mousemove(function() {
                  $(".chzn-select").chosen();
              });
     
              $(window).load(function() {
                  $(".chzn-select").chosen();
              });
          });
    
    Но я думаю он не совсем правильный - на событие mousemove я повесил $(".chzn-select").chosen();
    По идее более правильным было бы использовать событие change, но вариант с ним у меня так и не заработал.

    В принципе вариант выше у меня работает нормально, но меня волнут вопрос: не приведт ли такой вариант к тормозам на странице, ведь при каждом движении мыши на все элементы с классом chzn-select будет вешаться функция chosen().

    Может быть есть более лучший и правильный вариант? Может тут нужно использовать другое событие?
    Кому интересно как все работает, вот сайт - Перейти по ссылке
     
  2. bork75

    bork75 The Team

    Регистр.:
    21 июн 2008
    Сообщения:
    1.450
    Симпатии:
    717
    Посмотри вот такой код, может наведёт на какие идеи

    Код:
    <script type="text/javascript">
     
    var regiondb = new Object()
    regiondb["africa"] = [{value:"1", text:"Каир"},
    {value:"2", text:"Триполи"},
    {value:"3", text:"Алжир"},
    {value:"4", text:"Претория"}];
    regiondb["asia"] = [{value:"1", text:"Банкок"},
    {value:"2", text:"Дели"},
    {value:"3", text:"Улан-Батор"},
    {value:"4", text:"Джакарта"},
    {value:"5", text:"Токио"}];
    regiondb["australia"] = [{value:"1", text:"Мельбурн"},
    {value:"2", text:"Сидней"}];
    regiondb["europe"] = [{value:"1", text:"СПб"},
    {value:"2", text:"Лондон"},
    {value:"3", text:"Афины"},
    {value:"4", text:"Барселона"},
    {value:"5", text:"Париж"},
    {value:"6", text:"Рим"},
    {value:"7", text:"Москва"},
    {value:"69", text:"Бабруйск :)"}];
    regiondb["noamer"] = [{value:"1", text:"Нью-Йорк"},
    {value:"2", text:"Вашингтон"},
    {value:"3", text:"Лос Анджелес"},
    {value:"4", text:"Оттава"}];
    regiondb["soamer"] = [{value:"1", text:"Рио дэ Жанейро"},
    {value:"2", text:"Лима"},
    {value:"3", text:"Каракас"}];
     
    function setCities(chooser) {
    var cityChooser = chooser.form.elements["city"];
    // обнуляем список
    cityChooser.options.length = 0;
    // получаем value для массива regiondb
    var choice = chooser.options[chooser.selectedIndex].value;
    var db = regiondb[choice];
    // вставляем первый элемент
    cityChooser.options[0] = new Option("Город: ", "", true, false);
    if (choice != "") {
    for (var i = 0; i < db.length; i++) {
    cityChooser.options[i + 1] = new Option(db[i].text, db[i].value);
    }
    }
    }
     
    </script>
    </head>
    <body>
    <form name="dealers" action="">
    <select name="continent" onchange="setCities(this)">
    <option value="" selected>Континент: </option>
    <option value="africa">Африка</option>
    <option value="asia">Азия</option>
    <option value="australia">Австралия</option>
    <option value="europe">Европа</option>
    <option value="noamer">С. Америка</option>
    <option value="soamer">Ю. Америка</option>
    </select>&nbsp;
    <select name="city">
    <option value="" selected>Город: </option>
    </select>
    </form>