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

verfaa · 13 Апр 2013

На страничке присутствуют 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().

Может быть есть более лучший и правильный вариант? Может тут нужно использовать другое событие?
Кому интересно как все работает, вот сайт - Для просмотра ссылки Войди или Зарегистрируйся

bork75 · 13 Апр 2013

Посмотри вот такой код, может наведёт на какие идеи

Код:

<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>

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

verfaa

Профессор

bork75

The Team