Частый посетитель
Покинул форум
Сообщений всего: 879
Дата рег-ции: Март 2017
Откуда: Германия, Бавария
Помог: 37 раз(а)
|
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>
Удачи!(Отредактировано автором: 26 Мая, 2020 - 14:12:46)
|