Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Применение библиотек > Смена выбранного option в select


Автор: JackyFox 8.9.2011, 15:04
Привет!

Есть форма редактирования свойств объекта. Сам проект на Yii, но множество «спец-эффектов», конечно же, пришлось делать на jQuery.

Код

<form id="gas-alarm-form" action="/sdb/index.php?r=gasAlarm/update&amp;id=<какой-то id>" method="post">
    <select name="GasAlarm[organization_id]" id="GasAlarm_organization_id">
        <option value="5">Организация 1</option>
        <option value="6">Организация 2</option>
        <option value="7">Организация 3</option>
    </select>
    
    <select name="GasAlarm[location_id]" id="GasAlarm_location_id">
        <option value="4">Адрес 1</option>
        <option value="5">Адрес 2</option>
        <option value="6">Адрес 3</option>
    </select>
</form>


При загрузке формы select с локациями обновляется с помощью ajax-запроса к БД. 

Код

jQuery(function($) {
$.ajax(
    { 
        type: "POST",
        url:  "/sdb/index.php?r=gasAlarm/dloc",
        cache: false,
        data: "GasAlarm[organization_id])=<id связанного свойства>",
        success: function(html){
            $("#GasAlarm_location_id").html(html);
        }
    }
);
}


С этим кусочком всё ок. При этом, естественно, после обновления в списке выбирается самый первый option. Но это не есть хорошо, потому как существующий объект имел какое-то определенное значение, и надо бы выбрать в списке именно его. Я попробовал сделать это так:

Код

// Снимаем выделение на всякий случай
$("#GasAlarm_location_id option:selected").each(function(){
    this.selected=false;
});
// Устанавливаем выделение на option с известным из модели AR id
$("#GasAlarm_location_id [value='<id соответствующей локации>']").attr("selected", "selected");


Вот эта хрень не работает. Если в firebug'е проходить пошагово, то в списке локаций выделяется нужный элемент. Но при естественной загрузке выделенным остается первый элемент. Соответствие всех id проверил, так что ошибок в PHP-коде нету. 

Вот так выглядит в живую:

user posted image

Правильный адрес «ул. Стахановцев, 2», но его выделение не происходит.

Может я что-то намудрил, а может такую фичу можно реализовать по-другому?

Автор: нуп 8.9.2011, 15:17
Код

$("#GasAlarm_location_id option[value='<id соответствующей локации>']").attr("selected", "selected");
или 
$("#GasAlarm_location_id").val(<id соответствующей локации>);

Автор: Gold Dragon 8.9.2011, 15:24
если у тебя форма формируется в РНР, то можно сразу и селект там же сделать

Автор: JackyFox 8.9.2011, 16:04
нуп, попробовал оба предложенных варианта. К сожалению, так же нет результата.

Цитата(Gold Dragon @  8.9.2011,  15:24 Найти цитируемый пост)
если у тебя форма формируется в РНР, то можно сразу и селект там же сделать


Из-за того, что вообще локаций много, а конкретной организации соответствует небольшое их подмножество, формировать список на сервере не желательно. Если пользователь выберет другую организацию для данного объекта, список локаций будет вновь обновлен с помощью ajax-запроса.

У меня закралось подозрение, что из-за асинхронности ajax, попытка переключения элемента списка происходит раньше, чем успевает подгрузиться список option'ов. 

Я просто перенес код, управляющий сменой выделенного элемента в секцию success ajax'а. Теперь все работает.

Код

jQuery(function($) {
$.ajax(
    { 
        type: "POST",
        url:  "/sdb/index.php?r=gasAlarm/dloc",
        cache: false,
        data: "GasAlarm[organization_id])=<id связанного свойства>",
        success: function(html){
            // Заполняем
            $("#GasAlarm_location_id").html(html);
            // Переключаем
            $("#GasAlarm_location_id option:selected").each(function(){
                this.selected=false;
            });
            $("#GasAlarm_location_id [value='<id соответствующей локации>']").attr("selected", "selected");
        }
    }
);
}


Всем спасибо!  smile 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)