Ниспадающее меню (dropdown). Изменение списка

  • 3 Ответов
  • 774 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

Keylo

  • *
  • 4
  • 0
Добрый день.
Есть 2 выпадающих списка.
Первый содержит:
Меню 1
Меню 2
Меню 3

Во втором:
Опция 1
Опция 2
Опция 3
Опция 4

Как сделать, чтобы при выборе "меню 1" вываливались все из второго списка, а при выборе "меню 2", например, Опция 1, Опция 2, Опция 3, без четвертого?

*

Keylo

  • *
  • 4
  • 0
Сам написал, сам ответил.  :D

Получилось через JavaScript
Необходимо добавить код в свойствах формы => "CSS и JavaScript" => "Javascript"

Код
<script type="text/javascript">
 
function dynamic1(parent,child){

  var parent_array = new Array();
 
  parent_array[''] = ['Выберите пожалуйста'];
 
  parent_array['Меню 1'] = ['Опция 1','Опция 2','Опция 3','Опция 4'];
 
  parent_array['Меню 2'] = ['Опция 1','Опция 2','Опция 3'];
 
  parent_array['Меню 3'] = ['Сообщение'];
 
  var thechild = document.getElementById(child);
 
  thechild.options.length = 0;
 
  var parent_value = parent.options[parent.selectedIndex].value;
 
  if (!parent_array[parent_value]) parent_value = '';
 
  thechild.options.length = parent_array[parent_value].length;
 
  for(var i=0;i<parent_array[parent_value].length;i++){
 
    thechild.options[i].text = parent_array[parent_value][i];
 
    thechild.options[i].value = parent_array[parent_value][i];} }
 
</script>

и прописать в dropdown в дополнительных атрибутах
Код
onchange="dynamic1(this,'ID динамического выпадающего меню');"

Всем спасибо, всем пока.  *DRINK*
« Последнее редактирование: 06.11.2015, 17:48:21 от Keylo »

*

Keylo

  • *
  • 4
  • 0
Вот работоспособный показательный пример на html:

Код
<html>
<head>
<title>ЖАБАСКРИПИТ</title>
<script type="text/javascript">
 
function dynamic1(parent,child){

  var parent_array = new Array();
 
  parent_array[''] = ['Выберите пожалуйста'];
 
  parent_array['Меню 1'] = ['Опция 1','Опция 2','Опция 3','Опция 4'];
 
  parent_array['Меню 2'] = ['Опция 1','Опция 2','Опция 3'];
 
  parent_array['Меню 3'] = ['Сообщение'];
 
  var thechild = document.getElementById(child);
 
  thechild.options.length = 0;
 
  var parent_value = parent.options[parent.selectedIndex].value;
 
  if (!parent_array[parent_value]) parent_value = '';
 
  thechild.options.length = parent_array[parent_value].length;
 
  for(var i=0;i<parent_array[parent_value].length;i++){
 
    thechild.options[i].text = parent_array[parent_value][i];
 
    thechild.options[i].value = parent_array[parent_value][i];} }
 
</script>
</head>
<body>
<select name="test1" id="test1" onchange="dynamic1(this,'test2')">
  <option value="Меню 1">Меню 1</option>
  <option value="Меню 2">Меню 2</option>
  <option value="Меню 3">Меню 3</option>
  <option value="Меню 4">Меню 4</option>
</select>
<select name="test2" id="test2">
<option></option>
</select>
</body>
</html>

*

rk3dnp

  • ****
  • 319
  • 5
Оказывается у них есть встроена такая фича, отображать и прятать другие элементы при выборе одного из варианта. Переходим в настройки Extras - Condition fields (3 с низу пункт)
Указываем какой пункт отобразить или скрыть в случае выбора значение у другого пункта.