Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.04.2017, 17:16
Новичок на форуме
Отправить личное сообщение для Gunter153 Посмотреть профиль Найти все сообщения от Gunter153
 
Регистрация: 06.04.2017
Сообщений: 2

Связанные выпадающие списки
Добрый день,
я в web новичок, так что не стреляйте в пианиста - играю как умею.

есть у меня задача: связать два списка так, чтобы при изменении одного, автоматически менялось значение другого и наоборот. Я попробовал передвать через onchange в функцию changeBackgroundColor два значения: id элемента и цвет А затем менять фон в обоих элементах - сначала в одном, затем во втором.

И для первого выпадающего списка срабатывает, а вот вотрой игнорирует - значение для самого списка меняет, а вот связанный с ним список игнорирует.

<script>
  function changeBackgroundColor(id, newColor) {
    var elem = document.getElementById(id);
    elem.style.color = newColor;
    elem.style.backgroundColor = newColor;

  switch(id) {
    case 'Button1':  // if (id === 'Button1')
      var id2 = id + '_1';
      var elem2 = document.getElementById(id2);
      elem2.style.color = newColor;
      elem2.style.backgroundColor = newColor;
      alert("Id= "+id);

    case 'Button1_1':  // if (id === 'Button1_1')
      var id2 = id - '_1';
      var elem2 = document.getElementById(id2);
      elem2.style.color = newColor;
      elem2.style.backgroundColor = newColor;
      alert("Id= "+id);
  }
  }
</script>


<select class="apply_text1" size="1" name="Button1" id="Button1" onchange="changeBackgroundColor(id, value);">
<option value="white">NEW</option>
<option value="brown">A4</option>
<option value="red">A3</option>
<option value="orange">A2</option>
<option value="yellow">A1</option>
<option value="lime">N</option>
<option value="aqua">B1</option>
<option value="blue">B2</option>
<option value="navy">B3</option>
<option value="purple">B4</option>
<option value="black">NOT NEEDED</option>
</select>

<select class="apply_text2" size="1" name="Button1_1" id="Button1_1" onchange="changeBackgroundColor(id, value);">
<option value="white">NEW</option>
<option value="brown">A4</option>
<option value="red">A3</option>
<option value="orange">A2</option>
<option value="yellow">A1</option>
<option value="lime">N</option>
<option value="aqua">B1</option>
<option value="blue">B2</option>
<option value="navy">B3</option>
<option value="purple">B4</option>
<option value="black">NOT NEEDED</option>
</select>


Подскажите, пожалуйста, что может быть не так?
Ответить с цитированием
  #2 (permalink)  
Старый 06.04.2017, 17:43
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,782

Сообщение от Gunter153
var id2 = id - '_1';
Это что такое?

Не совсем понял чего ты там мастерил... Но, как вариант.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
function changeBackgroundColor(id, newColor) {
	var elem = document.getElementById(id);
	elem.style.color = newColor;
	elem.style.backgroundColor = newColor;
	switch(id) {
		case 'Button1': 
			var id2 = id + '_1';
			var elem2 = document.getElementById(id2);
			elem2.style.color = newColor;
			elem2.style.backgroundColor = newColor;
			alert("1 Id= "+id);
			break;
		case 'Button1_1': 
			var id2 = id.split('_')[0];
			var elem2 = document.getElementById(id2);
			elem2.style.color = newColor;
			elem2.style.backgroundColor = newColor;
			alert("2 Id= "+id2);
			break;
	};
};
</script>
</script>
</head>
<body>
<select class="apply_text1" size="1" name="Button1" id="Button1" onchange="changeBackgroundColor(id, value);">
	<option value="white">NEW</option>
	<option value="brown">A4</option>
	<option value="red">A3</option>
	<option value="orange">A2</option>
	<option value="yellow">A1</option>
	<option value="lime">N</option>
	<option value="aqua">B1</option>
	<option value="blue">B2</option>
	<option value="navy">B3</option>
	<option value="purple">B4</option>
	<option value="black">NOT NEEDED</option>
</select>
<select class="apply_text2" size="1" name="Button1_1" id="Button1_1" onchange="changeBackgroundColor(id, value);">
	<option value="white">NEW</option>
	<option value="brown">A4</option>
	<option value="red">A3</option>
	<option value="orange">A2</option>
	<option value="yellow">A1</option>
	<option value="lime">N</option>
	<option value="aqua">B1</option>
	<option value="blue">B2</option>
	<option value="navy">B3</option>
	<option value="purple">B4</option>
	<option value="black">NOT NEEDED</option>
</select>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 06.04.2017, 17:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,603

Сообщение от Gunter153
а вот вотрой игнорирует
нельзя вычесть часть строки в js --- можно заменить replace

но проще написать
case 'Button1_1':  // if (id === 'Button1_1')
*!*      
var id2 = 'Button1';
*/!*


case 'Button1':  // if (id === 'Button1')
      var id2 = 'Button1_1';
Ответить с цитированием
  #4 (permalink)  
Старый 07.04.2017, 13:15
Новичок на форуме
Отправить личное сообщение для Gunter153 Посмотреть профиль Найти все сообщения от Gunter153
 
Регистрация: 06.04.2017
Сообщений: 2

Прменого благодарен за исчерпывающие ответы! ))) Все работает.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Связанные списки с использованием Ajax и MySQL code_code AJAX и COMET 4 14.05.2013 16:00
Синхронные выпадающие списки Negro Общие вопросы Javascript 4 08.07.2012 22:26
Связанные списки Telnet AJAX и COMET 1 04.04.2011 21:18
взаимосвязанные выпадающие списки xDMK Серверные языки и технологии 37 11.11.2010 16:12
Выпадающие списки - динамика Страдающий AJAX и COMET 7 11.09.2009 18:25