получение перерисовывать на второй <select>

У меня есть два списка отображения на веб-странице: (Список клиентов) (Список проектов)получение перерисовывать на второй <select>

Когда пользователь изменяет свой выбор в списке клиентов, я заселить Список проектов. Я делаю вызов jquery php/mysql для извлечения проектов, относящихся к этому клиенту, и затем я использую эти данные для установки параметров для клиента <select>. К сожалению, изменение содержимого списка для проекта <select> не приводит к изменению отображения этого элемента, как установка innerHTML для текстового элемента.

Я могу заставить обновить страницу, и все выглядит нормально, но я бы предпочел не обновлять страницу. Есть ли способ вызвать изменение профиля <select>?

Вот набор HTML/javascript, в котором есть проблема. В нижней части функции BuildProjectList() видно, что я попытался заполнить список проектов двумя способами, установив innerHTML или создав список параметров. В любом случае отображение списка проектов не обновляется, когда я изменяю его содержимое в ответ на изменение выбора в списке клиентов. Но если после этого вы измените выделение в списке проектов, дисплей обновится, и вы можете убедиться, что базовые данные для списка проектов фактически изменены.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Test List ....</title> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
<script type="text/javascript"> 
function BuildClientList() 
{ 
    var uiEl = document.getElementById('uidCl'); 
    var aUidClient = new Array(3); 

    aUidClient[0] = ['101', 'Client 1']; 
    aUidClient[1] = ['102', 'Client 2']; 
    aUidClient[2] = ['102', 'Client 3']; 

    uiEl.options.length = 0; 
    var cClient = aUidClient.length; 
    for (iRow = 0; iRow < cClient; iRow++) 
    { 
     uiEl.options[iRow] = new Option(aUidClient[iRow][1], aUidClient[iRow][0]); 
    } 
} 

function BuildProjectList() 
{ 
    iClient = document.getElementById('uidCl').selectedIndex; 
    var uiEl = document.getElementById('uidPr'); 
    var aUidProject = new Array(3); 
    switch (iClient) 
    { 
     case 0: 
     aUidProject[0] = ['101', '1Project 1']; 
     aUidProject[1] = ['102', '1Project 2']; 
     aUidProject[2] = ['103', '1Project 3']; 
     break; 
     case 1: 
     aUidProject[0] = ['201', '2Project 1']; 
     aUidProject[1] = ['202', '2Project 2']; 
     aUidProject[2] = ['203', '2Project 3']; 
     break; 
     default: 
     aUidProject[0] = ['301', '3Project 1']; 
     aUidProject[1] = ['302', '3Project 2']; 
     aUidProject[2] = ['303', '3Project 3']; 
    } 


    uiEl.options.length = 0; 
    var cProject = aUidProject.length; 
    var strInner = ""; 
    for (iRow = 0; iRow < cProject; iRow++) 
    { 
     uiEl.options[iRow] = new Option(aUidProject[iRow][1], aUidProject[iRow][0]); 
     strInner += "<option value=\"" + aUidProject[iRow][0] + "\">" + 
      aUidProject[iRow][1] + "</option>"; 
    } 
// uiEl.innerHTML = strInner; 
} 

</script> 
</head> 
<body> 
<div data-role="fieldcontain"> 
<input type="hidden" id="id_user_info" name="id_user_info" value="1" /> 
    <label for="s_client" class="select ui-hidden-accessible">Client...</label> 
    <select data-overlay-theme="a" data-native-menu="false" name="uidCl" id="uidCl" onChange="BuildProjectList()"> 
<script type="text/javascript"> 
BuildClientList(); 
</script> 
</select> 


</div><div data-role="fieldcontain"> 
<input type="hidden" id="id_proj" name="id_proj" value="2" /> 
    <label for="s_proj" class="select ui-hidden-accessible">Project...</label> 
    <select data-overlay-theme="a" data-native-menu="false" name="uidPr" id="uidPr" > 
<script type="text/javascript"> 
BuildProjectList(); 
</script> 
</select> 
</div> 
</body> 
</html>

источник

2012-02-03 jbww

0 На самом деле ... пожалуйста, разместите свой код и создайте демо-версию http://jsfiddle.net/. –

Просьба представить несколько примеров кода. –

Из вашего вопроса «К сожалению, изменение содержимого списка для элемента клиента не вызывает», часть неясна. Почему вы меняете элементы списка клиентов? Изменяя, вы имеете в виду SelectIndex? Можно инициировать событие изменения с помощью jQuery: http://api.jquery.com/trigger/, возможно, что вам нужно перерисовать список проектов. Видеть некоторых тоже поможет. –

Я нашел способ использовать jquery для установки в индекс в списке и обновления дисплея. Функция javascript ниже показывает, как:

// set the index for a <select> element 
function SetIndex(eid, i) 
{ 
    var strEid = "#" + eid; 
    var menuSelect = $(strEid); 
    menuSelect[0].selectedIndex = i; 
    menuSelect.selectmenu("refresh"); 
}

источник

2012-02-13 17:40:59 jbww

получение перерисовывать на второй <select>

ответ

Смежные вопросы