Скрыть/показать элементы в зависимости от значения select
 

Необходимо отображать несколько полей в зависимости от выбранного значения в select. Это необходимо для работы в OTRS, поэтому сами элементы не могу редактировать, в шаблон могу добавить только дополнительный js файл,

Есть селект

<select id="Dest" class="Validate_Required " name="Dest" aria-required="true">
<option value="||-" selected="selected">-</option>
<option value="5||Компьютеры и периферийное оборудование">Компьютеры и периферийное оборудование</option>
<option value="12||Корпоративный портал и электронная почта">Корпоративный портал и электронная почта</option>
<option value="9||Оборудование для мероприятий">Оборудование для мероприятий</option>

</select>

Необходимо например если выбран пункт "5||Компьютеры и периферийное оборудование" отображались элементы

<label id="LabelArticleFreeText2">Инв.№ основного средства</label>
<input id="ArticleFreeText2" class="ArticleFreeText " type="text" value="" name="ArticleFreeText2">

а если нет, то скрывались.

Что-то тип такое

<select id="Dest" class="Validate_Required " name="Dest" aria-required="true" onChange="Selected(this)">
   <option value="0" selected="selected">-</option>
   <option value="1">Компьютеры и периферийное оборудование</option>
   <option value="2">Корпоративный портал и электронная почта</option>
   <option value="3">Оборудование для мероприятий</option>
</select>


<div id='Label1' style='display: none;'>
	Перечисляешь "Компьютеры и периферийное оборудование"
</div>
<div id='Label2' style='display: none;'>
	Перечисляешь "Корпоративный портал и электронная почта"
</div>
<div id='Label3' style='display: none;'>
	Перечисляешь "Оборудование для мероприятий"
</div>

и сама функция

function Selected(a) {
	var label = a.value;
	if (label==1) {
		document.getElementById("Label1").style.display='block';
		document.getElementById("Label2").style.display='none';
		document.getElementById("Label3").style.display='none';
		
	} else if (label==2) {
		document.getElementById("Label1").style.display='none';
		document.getElementById("Label2").style.display='block';
		document.getElementById("Label3").style.display='none';
		
	} else if (label==3) {
		document.getElementById("Label1").style.display='none';
		document.getElementById("Label2").style.display='none';
		document.getElementById("Label3").style.display='block';
		
	} else {
		document.getElementById("Label1").style.display='none';
		document.getElementById("Label2").style.display='none';
		document.getElementById("Label3").style.display='none';
	}
	
}

Здравствуйте. У меня аналогичная задача. Надо сделать таблицу из четырех колонок, в трех из которых будет отображаться информация в зависимости от выбранного select`а.
Часть кода страницы:

<table class="table_header" border="0">
	<tbody>
		<tr>
			<td>&nbsp;</td>
			<td>
				<div>
					<select  onChange="Selected(this)">
						<option value="1" selected="selected">Выберите комплектацию</option>
						<option value="2">LT 1.6 AT Base</option>
						<option value="3">LT 1.6 AT Comfort Pack</option>
						<option value="4">LT 1.6 AT Alloy Wheels Pack</option>
						<option value="5">LT 1.6 AT Comfort and Alloy Wheels Pack</option>
						<option value="6">LTZ 1.6 AT</option>
					</select>
				</div>
			</td>
			<td>
				<div>
					<select aria-required="true" onChange="Selectedb(this)">
						<option value="1">Выберите комплектацию</option>
						<option value="2">LT 1.6 AT Base</option>
						<option value="3">LT 1.6 AT Comfort Pack</option>
						<option value="4">LT 1.6 AT Alloy Wheels Pack</option>
						<option value="5">LT 1.6 AT Comfort and Alloy Wheels Pack</option>
						<option value="6">LTZ 1.6 AT</option>
					</select>
				</div>
			</td>
			<td>
				<div>
					<select aria-required="true" onChange="Selectedc(this)">
						<option value="1">Выберите комплектацию</option>
						<option value="2">LT 1.6 AT Base</option>
						<option value="3">LT 1.6 AT Comfort Pack</option>
						<option value="4">LT 1.6 AT Alloy Wheels Pack</option>
						<option value="5">LT 1.6 AT Comfort and Alloy Wheels Pack</option>
						<option value="6">LTZ 1.6 AT</option>
					</select>
				</div>
			</td>
		</tr>
	</tbody>
</table>
<div class="hideWrap">
	<a class="hideBtn" title="Показать\Скрыть блок" href="javascript://">Характеристики</a>
	<div class="hideCont">

		<table class="harakt" border="0" cellspacing="0" cellpadding="0">
			<thead>
				<tr>
					<td>
						<div name="label1" style="display:none;"> </div>
						<div name="label2" style="display:none;">LT 1.6 AT Base</div>
						<div name="label3" style="display:none;">LT 1.6 AT Comfort Pack</div>
						<div name="label4" style="display:none;">LT 1.6 AT Alloy Wheels Pack</div>
						<div name="label5" style="display:none;">LT 1.6 AT Comfort and Alloy Wheels Pack</div>
						<div name="label6" style="display:none;">LTZ 1.6 AT</div>
					</td>
					<td>
						<div name="labela1" style="display:none;"> </div>
						<div name="labela2" style="display:none;">LT 1.6 AT Base</div>
						<div name="labela3" style="display:none;">LT 1.6 AT Comfort Pack</div>
						<div name="labela4" style="display:none;">LT 1.6 AT Alloy Wheels Pack</div>
						<div name="labela5" style="display:none;">LT 1.6 AT Comfort and Alloy Wheels Pack</div>
						<div name="labela6" style="display:none;">LTZ 1.6 AT</div>
					</td>
					<td>
						<div name="labelb1" style="display:none;"> </div>
						<div name="labelb2" style="display:none;">LT 1.6 AT Base</div>
						<div name="labelb3" style="display:none;">LT 1.6 AT Comfort Pack</div>
						<div name="labelb4" style="display:none;">LT 1.6 AT Alloy Wheels Pack</div>
						<div name="labelb5" style="display:none;">LT 1.6 AT Comfort and Alloy Wheels Pack</div>
						<div name="labelb6" style="display:none;">LTZ 1.6 AT</div>
					</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Трансмиссия </td>
					<td>
						<div name="label1" style="display:none;"> </div>
						<div name="label2" style="display:none;">Автоматическая 6-ступенчатая коробка передач</div>
						<div name="label3" style="display:none;">Автоматическая 6-ступенчатая коробка передач</div>
						<div name="label4" style="display:none;">Автоматическая 6-ступенчатая коробка передач</div>
						<div name="label5" style="display:none;">Автоматическая 6-ступенчатая коробка передач</div>
						<div name="label6" style="display:none;">Автоматическая 6-ступенчатая коробка передач</div>
					</td>
					<td>
						<div name="labela1" style="display:none;"> </div>
						<div name="labela2" style="display:none;">Автоматическая 6-ступенчатая коробка передач</div>
						<div name="labela3" style="display:none;">Автоматическая 6-ступенчатая коробка передач</div>
						<div name="labela4" style="display:none;">Автоматическая 6-ступенчатая коробка передач</div>
						<div name="labela5" style="display:none;">Автоматическая 6-ступенчатая коробка передач</div>
						<div name="labela6" style="display:none;">Автоматическая 6-ступенчатая коробка передач</div>
					</td>
					<td>
						<div name="labelb1" style="display:none;"> </div>
						<div name="labelb2" style="display:none;">Автоматическая 6-ступенчатая коробка передач</div>
						<div name="labelb3" style="display:none;">Автоматическая 6-ступенчатая коробка передач</div>
						<div name="labelb4" style="display:none;">Автоматическая 6-ступенчатая коробка передач</div>
						<div name="labelb5" style="display:none;">Автоматическая 6-ступенчатая коробка передач</div>
						<div name="labelb6" style="display:none;">Автоматическая 6-ступенчатая коробка передач</div>
					</td>
				</tr>

Сам javascript:

function Selected(a) {
	    var label = a.value;
	   
	    if (label==1) {
	        document.getElementsByName("label1").style.display='block';
	        document.getElementsByName("label2").style.display='none';
	        document.getElementsByName("label3").style.display='none';
			document.getElementsByName("label4").style.display='none';
			document.getElementsByName("label5").style.display='none';
			document.getElementsByName("label6").style.display='none';
		} else if (label==2) {
			document.getElementsByName("label1").style.display="none";
			document.getElementsByName("label2").style.display="block";
			document.getElementsByName("label3").style.display='none';
			document.getElementsByName("label4").style.display='none';
			document.getElementsByName("label5").style.display='none';
			document.getElementsByName("label6").style.display='none';
	    } else if (label==3) {
	        document.getElementsByName("label1").style.display='none';
	        document.getElementsByName("label2").style.display='none';
	        document.getElementsByName("label3").style.display='block';
	        document.getElementsByName("label4").style.display='none';
			document.getElementsByName("label5").style.display='none';
			document.getElementsByName("label6").style.display='none';
	    } else if (label==4) {
	        document.getElementsByName("label1").style.display='none';
	        document.getElementsByName("label2").style.display='none';
	        document.getElementsByName("label3").style.display='none';
	        document.getElementsByName("label4").style.display='block';
			document.getElementsByName("label5").style.display='none';
			document.getElementsByName("label6").style.display='none'; 
		} else if (label==5) {
	        document.getElementsByName("label1").style.display='none';
	        document.getElementsByName("label2").style.display='none';
	        document.getElementsByName("label3").style.display='none';
	        document.getElementsByName("label5").style.display='block';
			document.getElementsByName("label4").style.display='none';
			document.getElementsByName("label6").style.display='none';
		} else if (label==6) {
	        document.getElementsByName("label1").style.display='none';
	        document.getElementsByName("label2").style.display='none';
	        document.getElementsByName("label3").style.display='none';
	        document.getElementsByName("label6").style.display='block';
			document.getElementsByName("label5").style.display='none';
			document.getElementsByName("label4").style.display='none';   
	    } else {
	        document.getElementsByName("label1").style.display='block';
	        document.getElementsByName("label2").style.display='none';
	        document.getElementsByName("label3").style.display='none';
			document.getElementsByName("label4").style.display='none';
			document.getElementsByName("label5").style.display='none';
			document.getElementsByName("label6").style.display='none';
	    }
}

Для каждого select`а меняется только название функции и названия атрибута name.
При выполненни функции FireBag выдает TypeError: document.getElementsByName(...).style is undefined.
Помогите пожалуйста решить проблемму.

werwolf4,
нет у группы элементов свойства style -- а у одного элемента есть - когда прочитаите документацию на то у чего нет style узнаите ответ на свой вопрос

KingStar, представляю алгоритм, когда в меню будет 20-30 элементов ))

Спасибо Рони за подсказку.
Все исправил. Теперь скрип выглядит так:

function Selected(a) {
	    var label = a.value;
	    if (label==1) {
	    	var i = 0
			while (i<100){
		        document.getElementsByName("label1")[i].style.display='block';
		        document.getElementsByName("label2")[i].style.display='none';
		        document.getElementsByName("label3")[i].style.display='none';
				document.getElementsByName("label4")[i].style.display='none';
				document.getElementsByName("label5")[i].style.display='none';
				document.getElementsByName("label6")[i].style.display='none';
				i++;
			}
		} else if (label==2) {
			var i = 0
			while (i<100){
				document.getElementsByName("label1")[i].style.display='none';;
				document.getElementsByName("label2")[i].style.display='block';;
				document.getElementsByName("label3")[i].style.display='none';
				document.getElementsByName("label4")[i].style.display='none';
				document.getElementsByName("label5")[i].style.display='none';
				document.getElementsByName("label6")[i].style.display='none';
				i++;
			}
...

Немного великоват. )))
Хотел сделать так:

function Selected(a) {
	var label = a.value;
	var y=label;
	var x=label-1;
	var nameClass
	while (y==label){
		nameClass = "label" + y;
	   	var i = 0;
	   	while (i<100){
	   		document.getElementsByName(nameClass)[i].style.display='display';	
	   	}
	}
	while (y<100){
	   	i = 0;
	   	y++;
	   	nameClass = "label".y;
	   	while(i<100){
	   		document.getElementsByName(nameClass)[i].style.display='block';
	   	}
	}
	while (x>0){
	   	i = 0;
	   	nameClass = "label".x;
	   	while(i<100){
	   		document.getElementsByName(nameClass)[i].style.display='block';
	   	}
	   	x--;
	}
}

но не знаю как правильно подставить в document.getElementsByName(nameClass) название класса с порядковым номером.

werwolf4,
:write:

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  td,select{
    width: 150px;
  }
  .harakt td div{
     display: none;
  }
  </style>
 <script>
window.onload = function () {
    var a = document.querySelectorAll("select");
    Array.prototype.forEach.call(a, function (a, c) {
        a.onchange = function () {
            var a = document.querySelectorAll(".harakt thead td:nth-child(" + (c + 2) + ") div"),
                d = this.selectedIndex || 0;
            Array.prototype.forEach.call(a, function (a, b) {
                a.style.display = b == d ? "block" : "none"
            });
            a = document.querySelectorAll(".harakt tbody td:nth-child(" + (c + 2) + ") div");
            Array.prototype.forEach.call(a, function (a, b) {
                a.style.display = b == d ? "block" : "none"
            })
        }
    })
};
</script>
</head>

<body>
<table class="table_header" border="0">
	<tbody>
		<tr>
			<td>Трансмиссия </td>
			<td>
				<div>
					<select>
						<option value="1" selected="selected">Выберите комплектацию</option>
						<option value="2">LT 1.6 AT Base</option>
						<option value="3">LT 1.6 AT Comfort Pack</option>
						<option value="4">LT 1.6 AT Alloy Wheels Pack</option>
						<option value="5">LT 1.6 AT Comfort and Alloy Wheels Pack</option>
						<option value="6">LTZ 1.6 AT</option>
					</select>
				</div>
			</td>
			<td>
				<div>
					<select>
						<option value="1">Выберите комплектацию</option>
						<option value="2">LT 1.6 AT Base</option>
						<option value="3">LT 1.6 AT Comfort Pack</option>
						<option value="4">LT 1.6 AT Alloy Wheels Pack</option>
						<option value="5">LT 1.6 AT Comfort and Alloy Wheels Pack</option>
						<option value="6">LTZ 1.6 AT</option>
					</select>
				</div>
			</td>
			<td>
				<div>
					<select>
						<option value="1">Выберите комплектацию</option>
						<option value="2">LT 1.6 AT Base</option>
						<option value="3">LT 1.6 AT Comfort Pack</option>
						<option value="4">LT 1.6 AT Alloy Wheels Pack</option>
						<option value="5">LT 1.6 AT Comfort and Alloy Wheels Pack</option>
						<option value="6">LTZ 1.6 AT</option>
					</select>
				</div>
			</td>
		</tr>
	</tbody>
</table>


		<table class="harakt" border="0" cellspacing="0" cellpadding="0">
			<thead>
				<tr><td>Трансмиссия </td>
					<td>
						<div></div>
						<div>LT 1.6 AT Base</div>
						<div>LT 1.6 AT Comfort Pack</div>
						<div>LT 1.6 AT Alloy Wheels Pack</div>
						<div>LT 1.6 AT Comfort and Alloy Wheels Pack</div>
						<div>LTZ 1.6 AT</div>
					</td>
					<td>
						<div></div>
						<div>LT 1.6 AT Base</div>
						<div>LT 1.6 AT Comfort Pack</div>
						<div>LT 1.6 AT Alloy Wheels Pack</div>
						<div>LT 1.6 AT Comfort and Alloy Wheels Pack</div>
						<div>LTZ 1.6 AT</div>
					</td>
					<td>
						<div></div>
						<div>LT 1.6 AT Base</div>
						<div>LT 1.6 AT Comfort Pack</div>
						<div>LT 1.6 AT Alloy Wheels Pack</div>
						<div>LT 1.6 AT Comfort and Alloy Wheels Pack</div>
						<div>LTZ 1.6 AT</div>
					</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Трансмиссия </td>
					<td>
						<div></div>
						<div>Автоматическая 6-ступенчатая коробка передач</div>
						<div>Автоматическая 6-ступенчатая коробка передач</div>
						<div>Автоматическая 6-ступенчатая коробка передач</div>
						<div>Автоматическая 6-ступенчатая коробка передач</div>
						<div>Автоматическая 6-ступенчатая коробка передач</div>
					</td>
					<td>
						<div></div>
						<div>Автоматическая 6-ступенчатая коробка передач</div>
						<div>Автоматическая 6-ступенчатая коробка передач</div>
						<div>Автоматическая 6-ступенчатая коробка передач</div>
						<div>Автоматическая 6-ступенчатая коробка передач</div>
						<div>Автоматическая 6-ступенчатая коробка передач</div>
					</td>
					<td>
						<div></div>
						<div>Автоматическая 6-ступенчатая коробка передач</div>
						<div>Автоматическая 6-ступенчатая коробка передач</div>
						<div>Автоматическая 6-ступенчатая коробка передач</div>
						<div>Автоматическая 6-ступенчатая коробка передач</div>
						<div>Автоматическая 6-ступенчатая коробка передач</div>
					</td>
				</tr> 	</tbody>
                </table>
</body>

</html>

Спасибо.

Рони еще раз спасибо за помощь.
Я немного изменил Ваш код так как в таблице может быть до 15 строк. Но теперь столкнулся с такой проблемой что на одной странице может быть несколько таблиц, содержимое которых выбирается. Как на этой странице: http://www.chevrolet.ru/avtomobili/c...els-specs.html.
Измененный javascript:

window.onload = function () {
    var a = document.querySelectorAll("select");
    Array.prototype.forEach.call(a, function (a, c) {
        a.onchange = function () {
            var a = document.querySelectorAll(".harakt thead td:nth-child(" + (c + 2) + ") div"),
                d = this.selectedIndex || 0;
            Array.prototype.forEach.call(a, function (a, b) {
                a.style.display = b == d ? "block" : "none"
            });
            for(var i=1; i<15; i++) {
	            a = document.querySelectorAll(".harakt tbody tr:nth-child(" + (i) + ") td:nth-child(" + (c + 2) + ") div");
	            Array.prototype.forEach.call(a, function (a, b) {
	                a.style.display = b == d ? "block" : "none"
	            })
        	}
        }
    })
};

Код страницы с двумя таблицами во вложении.
Сам баян на сайте уже есть.
:help:

werwolf4,
в чём проблемато? какой баян?