Javascript.RU

Форум

 Учебник Node.JS скринкаст Стандарт языка

Справочник

Discord чат

  
Статьи Тест знаний Аналоги функций PHP

Курсы javascript

  Сообщения за день

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

Скрыть/показать элементы в зависимости от значения 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">

а если нет, то скрывались.
Ответить с цитированием
  #2 (permalink)  
Старый 23.03.2012, 03:09
Аспирант
Отправить личное сообщение для KingStar Посмотреть профиль Найти все сообщения от KingStar 		 
Регистрация: 25.08.2011
Сообщений: 42

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

<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';
	}
	
}
Последний раз редактировалось KingStar, 23.03.2012 в 03:11.
Ответить с цитированием
  #3 (permalink)  
Старый 13.07.2014, 21:06
Интересующийся
Отправить личное сообщение для werwolf4 Посмотреть профиль Найти все сообщения от werwolf4 		 
Регистрация: 13.07.2014
Сообщений: 10

Здравствуйте. У меня аналогичная задача. Надо сделать таблицу из четырех колонок, в трех из которых будет отображаться информация в зависимости от выбранного 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.
Помогите пожалуйста решить проблемму.
Ответить с цитированием
  #4 (permalink)  
Старый 13.07.2014, 21:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони 		 
Регистрация: 27.05.2010
Сообщений: 33,109

werwolf4,
нет у группы элементов свойства style -- а у одного элемента есть - когда прочитаите документацию на то у чего нет style узнаите ответ на свой вопрос
Ответить с цитированием
  #5 (permalink)  
Старый 13.07.2014, 21:30
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak 		 
Регистрация: 27.04.2012
Сообщений: 1,410

KingStar, представляю алгоритм, когда в меню будет 20-30 элементов ))
Ответить с цитированием
  #6 (permalink)  
Старый 13.07.2014, 23:32
Интересующийся
Отправить личное сообщение для werwolf4 Посмотреть профиль Найти все сообщения от werwolf4 		 
Регистрация: 13.07.2014
Сообщений: 10

Спасибо Рони за подсказку.
Все исправил. Теперь скрип выглядит так:
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) название класса с порядковым номером.
Ответить с цитированием
  #7 (permalink)  
Старый 14.07.2014, 00:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони 		 
Регистрация: 27.05.2010
Сообщений: 33,109

werwolf4,

<!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>
Последний раз редактировалось рони, 14.07.2014 в 00:36.
Ответить с цитированием
  #8 (permalink)  
Старый 14.07.2014, 01:00
Интересующийся
Отправить личное сообщение для werwolf4 Посмотреть профиль Найти все сообщения от werwolf4 		 
Регистрация: 13.07.2014
Сообщений: 10

Спасибо.
Ответить с цитированием
  #9 (permalink)  
Старый 16.07.2014, 14:31
Интересующийся
Отправить личное сообщение для werwolf4 Посмотреть профиль Найти все сообщения от werwolf4 		 
Регистрация: 13.07.2014
Сообщений: 10

Рони еще раз спасибо за помощь.
Я немного изменил Ваш код так как в таблице может быть до 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"
	            })
        	}
        }
    })
};

Код страницы с двумя таблицами во вложении.
Сам баян на сайте уже есть.
Вложения:
Тип файла: txt index.txt (22.2 Кб, 7 просмотров)
Ответить с цитированием
  #10 (permalink)  
Старый 16.07.2014, 14:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони 		 
Регистрация: 27.05.2010
Сообщений: 33,109

werwolf4,
в чём проблемато? какой баян?
Ответить с цитированием
Ответ
Страница 1 из 2 1 2 >

« Не работает GetPosition | Включение класса active с определенным id »


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
изменение значения input при смене значения select galart jQuery 4 30.01.2015 19:39
изменение картинок в зависимости от значения input jump91 Общие вопросы Javascript 2 30.01.2012 09:57
Выполнение функции в зависимости от SELECT coolkostik Элементы интерфейса 3 05.01.2012 13:03
Показать картинку в зависимости от значения переменной arahmanov Общие вопросы Javascript 1 29.01.2011 16:07
помощ с выводом значения из Select l00vadim Элементы интерфейса 3 28.01.2011 09:02


© Илья Кантор, 2007-2021 О проекте - Обратная связь - Архив форума - Вверх