Форумы портала PHP.SU :: Версия для печати :: Как в зависимости от выбранного офиса, выводить в другой select менеджеров этого офиса?

1. rownong - 23 Мая, 2020 - 20:28:29 - перейти к сообщению

Здравствуйте. Обучаюсь веб-разработки. Для тренировки решил создавать дашборд на веб-странице.

Сейчас научился выводить в select список офисов из БД через Ajax jQuery, скриншот: https://yadi[dot]sk/i/w0XXUDhPRT9Kvg
Теперь встал вопрос, как в зависимости от выбранного офиса, выводить в другой select менеджеров этого офиса (связь можно сделать по номеру офиса, скриншот https://yadi[dot]sk/i/WE0-Qw9cB02i_g ). Помогите разобраться.

Архив с исходниками: страница вывода, php скрипт, дамп БД: https://yadi[dot]sk/d/Aupf7tb4QoG8pg
Код задокументирован.

2. br - 25 Мая, 2020 - 14:01:59 - перейти к сообщению

При выборе офиса посылать на сервер его номер через Ajax-запрос. А сервер пусть возвращает менеджеров этого офиса. Ну и осталось обновить второй select.
Гуглить по словам "динамические списки php" или "связанные списки php". Например, https://www[dot]youtube[dot]com/watch?v=rdHQ7p64Av4

3. Vladimir Kheifets - 26 Мая, 2020 - 14:11:26 - перейти к сообщению

rownong пишет:

Здравствуйте. Обучаюсь веб-разработки. Для тренировки решил создавать дашборд на веб-странице.

Сейчас научился выводить в select список офисов из БД через Ajax jQuery, скриншот: https://yadi[dot]sk/i/w0XXUDhPRT9Kvg
Теперь встал вопрос, как в зависимости от выбранного офиса, выводить в другой select менеджеров этого офиса (связь можно сделать по номеру офиса, скриншот https://yadi[dot]sk/i/WE0-Qw9cB02i_g ). Помогите разобраться.

Архив с исходниками: страница вывода, php скрипт, дамп БД: https://yadi[dot]sk/d/Aupf7tb4QoG8pg
Код задокументирован.

Добрый день!
Насколько я понял, речь идет не о транснациональной корпорации,
а о нескольких небольших офисах с несколькими менеджерамии.
Вообще-то, для тренировки, связать два селекта можно довольно просто без Ajax и jQuery, использую чистый JS.
Это информация для размышления:

Спойлер (Отобразить)

CODE (html):
скопировать код в буфер обмена

<!DOCTYPE html>
<html lang="en">
 
<head>
<meta charset="utf-8"/>
<meta name="Description" content="..."/>
 
<title>Test 2 Select</title>
<style>
#menegers{display:none}
</style>
</head>
 
 
<body>
 
<p>Офисы</p> 
 
<select id="select1" name="offices" size="4" multiple> <!-- В этот select подгружаем офисы -->
<option value="" selected>Все</option>
</select>
 
<br>
<div id="menegers">
<p>Менеджеры</p> 
<select id="select2" name="menegers" size="5" multiple> <!-- В этот select подгружаем офисы -->
<option value="" selected>Все</option>
</select>
</div>
<br>
<br>
<script> // Блок с js скриптом
//---- Здесь нужно вставить  PHP-код с Mysql запросом для генерацией JS-объектов offices и offices_menegers 
var offices = [];
offices[1] = {0:'1', 1:'Варшавский', 2:'okno.ru', 3:'http://okno-1.ru/images/varsavkii1.png'};
offices[2] = {0:'2', 1:'Борисово',  2:'okno-moskva.ru', 3:'https://okno-1.ru/images/borisivi1.png'};
 
var offices_menegers = [];
offices_menegers[1] = [{0:1, 1:'840714', 2:'Анжелика Смирнова', 3:'Смирнова Анжелика', 4:'https://okno-1.ru/images/smirnova-anzhelika.png'},
{0:2, 1:'1551135',2:'Ксения Тимофеева', 3:'Тимофеева Ксения', 4:'https://okno-1.ru/images/timofeeva-kseniya.png'}];
 
offices_menegers[2] = [{0:3, 1:'498048', 2:'Юлия', 3:'Ивашкина Юлия', 4:'https://okno-1.ru/images/ivashkina-yuliya.png'},
{0:4, 1:'498054', 2:'Вера', 3:'Павлова Вера', 4:'https://okno-1.ru/images/pavlova-vera.png'}];
//------------------------------------------------------
var sel1 = document.getElementById("select1");
var sel2 = document.getElementById("select2");
var menegers = document.getElementById("menegers");
for (var i in offices){ 
 opt = document.createElement("option");
 opt.value=i;
 opt.text=offices[i][1];
 sel1.add(opt, null);
}
//-------------------------------------------------------
var iOfficeSelected=0;
sel1.addEventListener("click", function(){
iOffice = this.options[this.selectedIndex].value;
        if(iOffice!="iOfficeSelected" && iOffice>0)     
        {               
                var length = sel2.options.length;
                if(length>0)
                {
                        for (i = length-1; i >= 1; i--) {
                          sel2.options[i] = null;
                        }
                }
                for (var i in offices_menegers[iOffice]){       
                 opt = document.createElement("option");                 
                 opt.value=offices_menegers[iOffice][i][1];
                 opt.text=offices_menegers[iOffice][i][3];
                 sel2.add(opt, null);
                }
                menegers.style.display = "block";
        }       
}
);
</script>
</body>
</html>

Удачи!