VPF::динамически меняющиеся списки выбора

check

Дата 31.8.2007, 09:51 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 610
Регистрация: 3.4.2006

Репутация: нет
Всего: 23

Имеется четыре динамически заполняемых селекта(я объясню проблему на примере трех, чтобы не загромождать код).
Набор option-ов во втором селекте зависит от того что выбрано в первом, в третьем от того что выбрано во втором и так далее.

Код


  <tr>
      <td>
          <select id="org" onchange="getOrgID(this)" name="org" style="width:100%">
               <option value="63">111</option>
               <option value="14">222</option>
          </select>
      </td>
   </tr>
  <tr>
     <td>
     <div id="eduformSelect">
         <select id="eduform" onchange="getDepartmentID(this)" name="eduForm" style="width:100%">
             <option value="8">qwwww</option>
             <option value="4">sdsdssd</option>
         </select>
     </div>
     </td>
  </tr>
  <tr>
     <td>
     <div id="deanSelect">
         <select id="deanOffice" onchange="getSpecialityID(this)" name="deanOffice" style="width:100%">
             <option value="136">qwwww</option>
             <option value="57">sdsdssd</option>
         </select>
     </div>
     </td>
  </tr>

Ситуация такая: я выбираю какой-то вариант в верхнем списке,  по событию onchange отправляется аякс запрос
который возвращает select с новым набором option-ов.   Но после того как второй селект выстроен, мне нужно послать такой же
аякс запрос который по тому значению которое по дефолту выбрано во втором селекте вернет третий селект.
Вот что у меня есть на данный момент(для аякса юзаю  JQuery,  но суть не в этом)

Код


var currentSelectID;

function getOrgID(sel) { 
    currentSelectID = sel.getAttribute("id"); 
    changeOrg(sel.options[sel.selectedIndex].value);
    
}
function getDepartmentID(sel) {  
    currentSelectID = sel.getAttribute("id"); 
    changeDepartment(sel.options[sel.selectedIndex].value);
}
//функции посылающие пост запросы и обрабатывающие ответ
//нас они само по себе не интересуют
function changeOrg(orgId) {
    $.post(  
        '{BASE_URL}/index.php?window&move', 
        {
            org: orgId
        },
        onAjaxSuccess
    );
}

function changeDepartment(eduFormID) {
    $.post(  
        '{BASE_URL}/index.php?window&move', 
        {
            EduFormID: eduFormID
        },
        onAjaxSuccess
    );
}
function onAjaxSuccess(data)
{  
    if (currentSelectID == 'org') {
        $("#eduform").empty();
        document.getElementById('eduformSelect').innerHTML = data;
    }
    if (currentSelectID == 'eduform') {
        $("#deanOffice").empty();
        document.getElementById('deanSelect').innerHTML = data;
    }
}

То есть получается следующее: при выборе нового значения в первом списке
меняется набор во втором списке. Мне нужно, чтобы при этом изменился также и третий список,
в соответствии со вторым, но этого не произойдет потому-что на втором списке не было события onchange
там просто через innerHTML изменился код внутри дива.
Такого события как onInnerHTML в JavaScript к сожалению нет smile

.
Как мне обойти эту проблему?

check

Дата 31.8.2007, 10:12 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 610
Регистрация: 3.4.2006

Репутация: нет
Всего: 23

Бр-р-р, элементарно же делается

Код


function onAjaxSuccess(data)
{  
    if (currentSelectID == 'org') {
        $("#eduform").empty();
        document.getElementById('eduformSelect').innerHTML = data;
        getDepartmentID(document.getElementById('eduform'));
    }

//и так далее

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »