С Новым годом! Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.58/26: Рейтинг темы: голосов - 26, средняя оценка - 4.58
 Аватар для KaRaNTiN
44 / 44 / 11
Регистрация: 10.06.2009
Сообщений: 311
Записей в блоге: 2

Динамический select на JS+PHP

02.12.2011, 18:42. Показов 4906. Ответов 1
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Доброго времени суток!..

При выборе одного из вариантов в одном select, в другом подгружаются нужные варианты, возможность которых выбирать несколько (select multiple). Рабочий код:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 <label> Выбери гостей&nbsp;&nbsp;
  <select name="away" id="List3">
<? include 'special/option-team.php'?>
 </select>
  <script type="text/javascript">
var syncList3 = new syncList;
syncList3.dataList = {
 
  'Торнадо-Спорт':{
      'Игрок 1':'Игрок 1',
      'Игрок 2':'Игрок 2',
  }
 };
 syncList3.sync("List3","List4");
</script>
  </label><br>
    <label>Away
<select name="sostavaway" id="List4" multiple onchange = "document.FormName.saway.value = getMultipleValue(this)"></select>
</label>
<textarea name="saway" value=""/></textarea><br><br>
js-файл
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/*
wwww.tigir.com (дата последней модификации - 30.11.2007)
Библиотека linkedselect.js из статьи "Javascript SELECT - динамические списки" - [url]http://www.tigir.com/linked_select.htm[/url]
 
syncList - "класс" связанных списков
*/
function syncList(){} //Определяем функцию конструктор
 
//Определяем методы
 
//Метод sync() - принимает список из значений атрибутов id элементов SELECT, образующих связанный список и запускает их синхронизацию
syncList.prototype.sync = function()
{
    //Перебираем аргументы (id элементов SELECT) и назначаем событиям onChange селектов, с соответствующими id, функцию-обработчик. 
    //В качестве обработчика выступает второй метод объекта syncList - _sync (напрямую его вызывать не нужно) 
    //Обработчик назначается всем элементам SELECT кроме последнего в списке аргументов, т.к. последний не влияет ни на какой другой элемент SELECT и с ним не нужно синхронизироваться.
    for (var i=0; i < arguments.length-1; i++)  document.getElementById(arguments[i]).onchange = (function (o,id1,id2){return function(){o._sync(id1,id2);};})(this, arguments[i], arguments[i+1]);
    document.getElementById(arguments[0]).onchange();//запускаем обработчик onchange первого селекта, чтобы при загрузке страницы заполнить дочерние селекты значениями.
}
//служебный метод _sync - срабатывает при смене выбранного элемента в текущем (старшем) элементе SELECT (по его событию onChange) и изменяет содержимое зависимого селекта на основании значения выбранного в старшем селекте.
syncList.prototype._sync = function (firstSelectId, secondSelectId)
{
    var firstSelect = document.getElementById(firstSelectId);
    var secondSelect = document.getElementById(secondSelectId);
 
    secondSelect.length = 0; //обнуляем второй (подчиненный) SELECT
    
    if (firstSelect.length>0)//если первый (старший) SELECT не пуст
    {
        //из свойства dataList, с данными для заполнения подчиненных селектов, берем ту часть данных, которая соответствует именно значению элемента, 
        //выбранного в первом селекте, и определяет содержимое подчиненного элемента SELECT.
        var optionData = this.dataList[ firstSelect.options[firstSelect.selectedIndex==-1 ? 0 : firstSelect.selectedIndex].value ];
        //заполняем второй (подчиненный) селект значениями (создаем элементы option)
        for (var key in optionData || null) secondSelect.options[secondSelect.length] = new Option(optionData[key], key);
        
        //если в старшем SELECT-е нет выделенного пункта, выделяем первый
        if (firstSelect.selectedIndex == -1) setTimeout( function(){ firstSelect.options[0].selected = true;}, 1 );
        //если во втором списке нет выделенного пункта, выделяем первый его пункт
        if (secondSelect.length>0) setTimeout( function(){ secondSelect.options[0].selected = true;}, 1 );
    }
    //если второй (подчиненный) селект имеет в свою очередь свои подчиненные селекты (те, для которых он главный), 
    //то запускаем его обработчик onchange, чтобы изменить его подчиненные селекты
    secondSelect.onchange && secondSelect.onchange();
};
JavaScript
1
onchange = "document.FormName.saway.value = getMultipleValue(this)"
Означает, что выбранные элементы скопируются в textarea.

Суть проблемы: Вот в скрипте

JavaScript
1
2
3
4
5
6
7
8
9
10
11
  <script type="text/javascript">
var syncList3 = new syncList;
syncList3.dataList = {
 
  'Торнадо-Спорт':{
      'Игрок 1':'Игрок 1',
      'Игрок 2':'Игрок 2',
  }
 };
 syncList3.sync("List3","List4");
</script>
Как сделать, чтобы не самому каждое значение присваивать и вручную выводить список, а чтобы подгружались из БД запис. Т.е. такой вот вариант не работает:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <script type="text/javascript">
var syncList3 = new syncList;
syncList3.dataList = {
 
  'Торнадо-Спорт':{
      <? $player=mysql_query("select surname, name from soborka");
   $myplayer=mysql_fetch_array($player); do{ ?> ?>
      '<? echo $myplayer['surname'], ' ', $myplayer['name'] ?>':'<? echo $myplayer['surname'], ' ', $myplayer['name'] ?>',
      <? }
    while ($myplayer=mysql_fetch_array($player)); ?>
  }
 };
 syncList3.sync("List3","List4");
</script>
P.S. в JS слабый, поэтому обращаюсь к Вам за помощью)

Добавлено через 5 часов 7 минут
проблемка все еще не решена).. всё также прошу помощи)

Добавлено через 17 часов 59 минут


Добавлено через 43 минуты
Даже такая хитрость не сработала =\

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<? echo "<script>";
// Создаем новый объект связанных списков
 echo "var syncList1 = new syncList;";
 echo "syncList1.dataList = {";
 
/* Определяем элементы второго списка в зависимости 
от выбранного значения в первом списке */
 
echo "  'Соборка':{";
   $player=mysql_query("select surname, name from soborka");
   $myplayer=mysql_fetch_array($player); 
   do{
  echo " ' ";
  echo $myplayer['surname'], ' ', $myplayer['name'];
  echo "':'";
  echo $myplayer['surname'], ' ', $myplayer['name'];
  echo "',";
  }
    while ($myplayer=mysql_fetch_array($player));
 echo" }";
echo " };";
echo ' syncList1.sync("List1","List2");';
echo "</script>"
?>
Добавлено через 16 минут
Заработало).. Как же я рад)) :dance3: Правильный вариант - в сообщении выше).. Забыл просто подключить БД =\
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
02.12.2011, 18:42
Ответы с готовыми решениями:

Динамический SELECT путем JavaScript, как вставить PHP?
Доброго дня! Был у меня такой селект: &lt;select name=&quot;curseName&quot; id=&quot;curseName&quot;&gt; &lt;option value=&quot;Семинар 1&quot; &lt;?php...

Динамический select
Добрый вечер! Подскажите, как сделать динамический select, то есть я не хочу вбивать ограниченное количество Option'ов, и их значений, я...

Динамический select + Firefox
Все привет, возникла следующая проблема: Динамически заполняю select'ы: &lt;select id=&quot;1&quot; name=&quot;1&quot;...

1
 Аватар для KaRaNTiN
44 / 44 / 11
Регистрация: 10.06.2009
Сообщений: 311
Записей в блоге: 2
04.12.2011, 21:50  [ТС]
А теперь новая проблема, чтоли).. Всё по тому же скрипту, который в 1м сообщении указан, js-файл)..

Надо, чтобы при Выборе "Высшая лига" из <select id="List1">, в <select id="List2"> был список команды, а <select id="List5"> тоже "Высшая Лига". Аналогично и с выбором "Первая Лига", толкьо в <select id="List5"> Первая Лига. Помогите подкорректировать срипт, пожалуйста. Код формы:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 <label>Выбери Лигу&nbsp;&nbsp;
 <select name="league" id="List1">
  <option value=""></option>
 <option value="Высшая Лига">Высшая Лига</option>
 <option value="Первая Лига">Первая Лига</option>
 </select>
 </label><br>
 <label> Выбери хозяев&nbsp;&nbsp;
  <select name="home" id="List2"></select>
  </label><br>
   <label> Home
<select name="sostavhome" id="List3" multiple  onchange = "document.FormName.shome.value = getMultipleValue(this)"></select>
</label>
<?
printf ( "<script>
 var syncList1 = new syncList;
 syncList1.dataList = {
  'Высшая Лига':{
          '':'',
      'Соборка':'Соборка',
      'Атлетик':'Атлетик',
...
  },
 
  'Первая Лига':{
      '':'',
      'Локомотив':'Локомотив',
      'Маяк':'Маяк',
...
  },");
/* Определяем элементы третьего списка в зависимости 
от выбранного значения во втором списке */
 
 echo "  'Реал':{";
   $player=mysql_query("select surname, name from realodessa");
 include "special/js.php";
echo "  'Соборка':{";
   $player=mysql_query("select surname, name from soborka");
 include "special/js.php";
...
printf( " };
syncList1.sync('List1','List2','List3');
</script>")
?>
<textarea name="shome" value=""/></textarea><br><br>
 <select name="league" id="List5"></select>
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
04.12.2011, 21:50
Помогаю со студенческими работами здесь

Динамический SELECT не передает данные
Имеется два селекта, после выбора значения одного срабатывает JS вот код: (function () { &quot;use strict&quot;; jQuery(function ()...

Jqgrid связанные списки (динамический select)
Никак не получается сделать связанные списки в jqGrid (вложение 1). grid = $(&quot;#list&quot;); grid.jqGrid({ ...

Динамический вывод данных из базы MySQL при выборе опций в select
Вот смотрите: есть таблица users в БД, в ней две колонки - id и name. Я с помощью php делаю выпадающий список, в котором каждый option -...

Динамический SELECT
Есть задача сделать раскрывающийся список с данными из БД. В зависимости от выбора в первом списке, формируется второй и т.д. Файл...

Динамический select к таблице
я пытаюсь сделать динамический select к таблице. пробовал поставить PRAGMA RESTRICT_REFERENCES(TEST_FUNC,WNDS); внутри функции - все...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
Новый CodeBlocs. Версия 25.03
palva 04.01.2026
Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .
Модель микоризы: классовый агентный подход
anaschu 02.01.2026
Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути
Programma_Boinc 01.01.2026
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост.
Programma_Boinc 28.12.2025
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / **********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / **********/ gallery/ bKBkQFf Пост отсюда. . .
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
Programma_Boinc 26.12.2025
Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru