Javascript-форум - Дбулируем установить значение одного <slect> при его выборе в другом

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Дбулируем установить значение одного <slect> при его выборе в другом (https://javascript.ru/forum/dom-window/29426-dbuliruem-ustanovit-znachenie-odnogo-slect-pri-ego-vybore-v-drugom.html)

Буду плакать скоро :help: эта функция работает отлично, но перестала работать другая :( Смысл в том, что у меня есть 3 сэлэкта, значения 1 и 3 должни дублироватся в зависимости от 1-го, значения 2-го будет показывать в зависимости от того что выбрано в первном, мож криво обяснил, не ругайте сильно...

<!-- динамическая форма-->
<script type="text/javascript"><!--
function dynamicSelect(id1, id2) {

// Сперва необходимо проверить поддержку W3C DOM в браузере

 if (document.getElementById && document.getElementsByTagName) {

// Определение переменных, ссылающихся на списки

  var sel1 = document.getElementById(id1);
  var sel2 = document.getElementById(id2);

// Клонирование динамического списка

  var clone = sel2.cloneNode(true);

// Определение переменных для клонированных элементов списка

  var clonedOptions = clone.getElementsByTagName("option");

// Вызов функции собирающей вызываемый список

  refreshDynamicSelectOptions(sel1, sel2, clonedOptions);

// При изменении выбранного элемента в первом списке: // вызов функции пересобирающей вызываемый список

  sel1.onchange = function() {
  refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
  }
 }
}

// Функция для сборки динамического списка

function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) {

// Удаление всех элементов динамического списка

 while (sel2.options.length) {
  sel2.remove(0);
 }
 var pattern1 = /( |^)(select)( |$)/;
 var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)");

// Перебор клонированных элементов списка

 for (var i = 0; i < clonedOptions.length; i++) {

// Если название класса клонированного option эквивалентно "select" // либо эквивалентно значению option первого списка

  if (clonedOptions[i].className.match(pattern1) ||
  clonedOptions[i].className.match(pattern2)) {

// его нужно клонировать в динамически создаваемый список

   sel2.appendChild(clonedOptions[i].cloneNode(true));
  }
 }
}

// Вызов скрипта при загрузке страницы
window.onload = function () {

	dynamicSelect("action", "product");
	dynamicSelect("action1", "product1");
	dynamicSelect("action2", "product2");
	dynamicSelect("action3", "product3");
	dynamicSelect("action4", "product4");
	dynamicSelect("action5", "product5");
	 
	var sel1 = document.getElementById('action5');
	var sel2 = document.getElementById('action6');
		
	/*
	var sel1 = document.getElementsByName('kategory_nazva')[0];
	var sel2 = document.getElementsByName('new_kategory_nazva')[0];
	*/
	sel1.onchange = function () {
	sel2.selectedIndex = sel1.selectedIndex; 

  }
}
</script>

<form id="form2" name="form2" method="post" action="action.php" enctype="multipart/form-data">
<select name="kategory_nazva" id="action5">
<option>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
<option>Пункт 4</option>
</select>

<select name="subkategory_nazva" id="product5">";
<option class="Пункт 1">Пункт 101 </option>
<option class="Пункт 1">Пункт 102 </option>
<option class="Пункт 1">Пункт 103 </option>
<option class="Пункт 2">Пункт 201 </option>
<option class="Пункт 2">Пункт 202 </option>
<option class="Пункт 2">Пункт 203 </option>
</select>

<select name="new_kategory_nazva" id="action6">
<option>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
<option>Пункт 4</option>
</select>
</form>
//-->

Молю... помогите!!!...

Цитата:

Сообщение от Skesh

Буду плакать скоро эта функция работает отлично, но перестала работать другая Смысл в том, что у меня есть 3 сэлэкта, значения 1 и 3 должни дублироватся в зависимости от 1-го, значения 2-го будет показывать в зависимости от того что выбрано в первном, мож криво обяснил, не ругайте сильно...

Поподробнее и поточнее объясните чего хотите добиться в итоге, а то из этого описания не очень понятно (с этого, кстати, и надо было начинать), что должно создаваться динамически, что нет и т.п.

Смотриет, функция dynamicSelect предназначена для динамического изменение элементов в списке №2 (name="subkategory_nazva") по класу. Тоесть в списке №1 (name="kategory_nazva") я выбираю Пункт 1 а в списке №2 (name="subkategory_nazva") у меня появляются все елементы у которых клас стоит Пункт 1. Теперь я еще хочу добавить функцию

var sel1 = document.getElementById('action5');
var sel2 = document.getElementById('action6');
sel1.onchange = function () {
sel2.selectedIndex = sel1.selectedIndex;

чтобы когда я выберу Пункт 1 в списке №1 тот же пункт автоматически выберался в списке №3 (name="new_kategory_nazva"). По отдельности они работают, а вместе не хотят :(

<select id="sel1">
  <option>Пункт 1</option>
  <option>Пункт 2</option>
  <option>Пункт 3</option>
  <option>Пункт 4</option>
</select>

<select id="sel2">
  <option value="0">Пункт 101 </option>
  <option value="0">Пункт 102 </option>
  <option value="0">Пункт 103 </option>
  <option value="1">Пункт 201 </option>
  <option value="1">Пункт 202 </option>
  <option value="1">Пункт 203 </option>
  <option value="2">Пункт 301 </option>
  <option value="2">Пункт 302 </option>
  <option value="2">Пункт 302 </option>
  <option value="3">Пункт 401 </option>
  <option value="3">Пункт 402 </option>
  <option value="3">Пункт 403 </option>
</select>

<select id="sel3">
  <option>Пункт 1</option>
  <option>Пункт 2</option>
  <option>Пункт 3</option>
  <option>Пункт 4</option>
</select>

<script>
window.onload = function () {//onload begin
  var sel1 = document.getElementById('sel1');
  var sel2 = document.getElementById('sel2');
  var sel3 = document.getElementById('sel3');
  var childs = sel2.options;
  var len = sel2.children.length;
  var index;
  var flag;

  for (var i = 0; i < len; i++) {
    index = sel1.selectedIndex;
    if (parseInt(childs[i].value) == index) {
      childs[i].style.display = 'block';
    } else {
      childs[i].style.display = 'none';
    }
  }

  sel1.onchange = function () {
    index = sel1.selectedIndex;
    flag = 0;
    for (var i = 0; i < len; i++) {
      if (parseInt(childs[i].value) == index) {
        if (flag == 0) {
          childs[i].style.display = 'block';
          sel2.selectedIndex = i;
          flag = 1;
        } else {
          childs[i].style.display = 'block';         
        }
      } else {
        childs[i].style.display = 'none';
      }
    }

    sel3.selectedIndex = sel1.selectedIndex; 
  }

}//onload end
</script>

чтото не работает...

Да, есть некоторые проблемы с display для option, сейчас доделаю с копированием пунктов в другой select

<!doctype html>
<select id="sel1">
  <option>Пункт 1</option>
  <option>Пункт 2</option>
  <option>Пункт 3</option>
  <option>Пункт 4</option>
</select>

<select id="sel2" style="display: none">
  <option value="0">Пункт 101 </option>
  <option value="0">Пункт 102</option>
  <option value="0">Пункт 103 </option>
  <option value="1">Пункт 201 </option>
  <option value="1">Пункт 202 </option>
  <option value="1">Пункт 203 </option>
  <option value="2">Пункт 301 </option>
  <option value="2">Пункт 302 </option>
  <option value="2">Пункт 302 </option>
  <option value="3">Пункт 401 </option>
  <option value="3">Пункт 402 </option>
  <option value="3">Пункт 403 </option>
</select>

<select id="sel2copy">
</select>

<select id="sel3">
  <option>Пункт 1</option>
  <option>Пункт 2</option>
  <option>Пункт 3</option>
  <option>Пункт 4</option>
</select>

<script>
window.onload = function () {//onload begin
  var sel1 = document.getElementById('sel1');
  var sel2 = document.getElementById('sel2');
  var sel3 = document.getElementById('sel3');
  var sel2copy = document.getElementById('sel2copy');

  var childs = sel2.options;
  var len = sel2.options.length;
  var index;

  var setPoints = function () {
    index = sel1.selectedIndex;
    sel2copy.innerHTML = '';
    for (var i = 0; i < len; i++) {
      if (parseInt(childs[i].value) == index) {
        sel2copy.appendChild(childs[i].cloneNode(true));
      }
    } 
  }

  setPoints();

  sel1.onchange = function () {
    setPoints();
    sel3.selectedIndex = sel1.selectedIndex; 
  }

}//onload end
</script>

Крутяк вобще! Спасибо большое! Буду должен пиво! :)

Помгите сюда прикрутить:

<p><?PHP echo $language[225];?> 
					<select name="kategory_nazva" id="sel1">
					<?PHP
					for ($i=0; $i<=count($mass_kategory)-1; $i++)
					{	echo "<option value=\"$mass_kategory[$i]\" ";
						if ($mass_kategory[$i]==$kategory)	{echo "selected";}
						echo ">$mass_kategory[$i]</option>";
					}
					?>
					</select>
					<select name="subkategory_nazva" id="sel2" style="display: none">";
					<?PHP
					for ($i=0; $i<=count($mass_subkategory)-1; $i++)
					{	echo "<option value=\"$mass_subkategory[$i]\" "; 
						if ($mass_subkategory[$i]==$subkategory)	{echo "selected";}
						echo ">$mass_subkategory[$i]</option>";
					}
					?>
					</select>
					
					<select name="subkategory_nazva" id="sel2copy">";
					
					</select>
					
					<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<?PHP echo $language[226];?> 
					<select name="new_kategory_nazva"  id="sel3">
					<?PHP
					for ($i=0; $i<=count($mass_kategory)-1; $i++)
					{	echo "<option value=\"$mass_kategory[$i]\" ";
						if ($mass_kategory[$i]==$kategory)	{echo "selected";}
						echo ">$mass_kategory[$i]</option>";
					}
					?>
					</select>

только чюр не менять name и value

На мой взгляд, прикручивать ничего не надо, вставляйте скрипт как есть, ваша задача наполнить только пункты в селектах.