Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.09.2012, 23:58
Интересующийся
Отправить личное сообщение для zerojava Посмотреть профиль Найти все сообщения от zerojava
 
Регистрация: 26.05.2011
Сообщений: 20

показать слой при выборе в списке
Всем доброй ночи... Я не владею JavaScript у меня всего лишь есть скрипт который отображает определенный слой <div> при выборе в выпадающем списке соответствующего значения. Все работает, но только для одного списка, подскажите пожалуйста как можно "подкрутить" данный скрипт для нескольких выпадающих списков на странице.

<script>
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';
		document.getElementById("Label4").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';
		document.getElementById("Label4").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';
		document.getElementById("Label4").style.display='none';
	} else if (label==4) {
		document.getElementById("Label1").style.display='none';
		document.getElementById("Label2").style.display='none';
		document.getElementById("Label3").style.display='none';
		document.getElementById("Label4").style.display='block';		
	} else {
		document.getElementById("Label1").style.display='none';
		document.getElementById("Label2").style.display='none';
		document.getElementById("Label3").style.display='none';
		document.getElementById("Label4").style.display='none';
	}	
}
</script>

<form> 

<select name="layer" aria-required="true" onChange="Selected(this)">
<option value="0" selected="selected">no layer</option>
<option value="1">layer 1</option>
<option value="2">layer 2</option>
<option value="3">layer 3</option>
<option value="4">layer 4</option>
</select>

<div id='Label1' style='display: none;'><span class="note">layer 1</div>
<div id='Label2' style='display: none;'><span class="note">layer 2</div>
<div id='Label3' style='display: none;'><span class="note">layer 3</div>
<div id='Label4' style='display: none;'><span class="note">layer 4</div>

</form>
Ответить с цитированием
  #2 (permalink)  
Старый 10.09.2012, 00:29
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

zerojava,
<script>
function Selected(a, div) {
    var label = a.value;
    if (label==1) {
        document.getElementById(div+"1").style.display='block';
        document.getElementById(div+"2").style.display='none';
        document.getElementById(div+"3").style.display='none';
        document.getElementById(div+"4").style.display='none';    
    } else if (label==2) {
        document.getElementById(div+"1").style.display='none';
        document.getElementById(div+"2").style.display='block';
        document.getElementById(div+"3").style.display='none';
        document.getElementById(div+"4").style.display='none';    
    } else if (label==3) {
        document.getElementById(div+"1").style.display='none';
        document.getElementById(div+"2").style.display='none';
        document.getElementById(div+"3").style.display='block';
        document.getElementById(div+"4").style.display='none';
    } else if (label==4) {
        document.getElementById(div+"1").style.display='none';
        document.getElementById(div+"2").style.display='none';
        document.getElementById(div+"3").style.display='none';
        document.getElementById(div+"4").style.display='block';       
    } else {
        document.getElementById(div+"1").style.display='none';
        document.getElementById(div+"2").style.display='none';
        document.getElementById(div+"3").style.display='none';
        document.getElementById(div+"4").style.display='none';
    }  
}
</script>
 
<form>
 
<select name="layer" aria-required="true" onChange="Selected(this, 'Label')">
<option value="0" selected="selected">no layer</option>
<option value="1">layer 1</option>
<option value="2">layer 2</option>
<option value="3">layer 3</option>
<option value="4">layer 4</option>
</select>
 
<div id='Label1' style='display: none;'><span class="note">layer 1</span></div>
<div id='Label2' style='display: none;'><span class="note">layer 2</span></div>
<div id='Label3' style='display: none;'><span class="note">layer 3</span></div>
<div id='Label4' style='display: none;'><span class="note">layer 4</span></div>

<select name="layer2" aria-required="true" onChange="Selected(this, 'div')">
<option value="0" selected="selected">no layer</option>
<option value="1">layer 1</option>
<option value="2">layer 2</option>
<option value="3">layer 3</option>
<option value="4">layer 4</option>
</select>
 
<div id='div1' style='display: none;'><span class="note">layer 1</span></div>
<div id='div2' style='display: none;'><span class="note">layer 2</span></div>
<div id='div3' style='display: none;'><span class="note">layer 3</span></div>
<div id='div4' style='display: none;'><span class="note">layer 4</span></div>

</form>

Последний раз редактировалось lord2kim, 10.09.2012 в 00:48.
Ответить с цитированием
  #3 (permalink)  
Старый 10.09.2012, 00:46
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

<style>
	.next div {
		display: none;
	}
	.vis {
		display: block !important
	}
</style>

<script>
	function Selected(sel) {
		var next = sel.nextSibling.nextSibling; //nextElementSibling;
		var elems = next.getElementsByClassName('vis');//сделать кроссбраузерной
		if (elems.length != 0) {
			elems[0].className = '';
		}
		if (sel.selectedIndex != 0) {
			next.children[sel.selectedIndex - 1].className = 'vis';
		} 
	}
</script>

<form> 

<select name="layer" aria-required="true" onChange="Selected(this)">
	<option value="0" selected="selected">no layer</option>
	<option value="1">layer 1</option>
	<option value="2">layer 2</option>
	<option value="3">layer 3</option>
	<option value="4">layer 4</option>
</select>

<div class="next">
	<div id='Label1'><span class="note">layer 1</div>
	<div id='Label2'><span class="note">layer 2</div>
	<div id='Label3'><span class="note">layer 3</div>
	<div id='Label4'><span class="note">layer 4</div>
</div>

<select name="layer" aria-required="true" onChange="Selected(this)">
	<option value="0" selected="selected">no layer</option>
	<option value="1">layer 1</option>
	<option value="2">layer 2</option>
	<option value="3">layer 3</option>
	<option value="4">layer 4</option>
</select>

<div class="next">
	<div id='Label1'><span class="note">layer 1</div>
	<div id='Label2'><span class="note">layer 2</div>
	<div id='Label3'><span class="note">layer 3</div>
	<div id='Label4'><span class="note">layer 4</div>
</div>




</form>
Ответить с цитированием
  #4 (permalink)  
Старый 10.09.2012, 00:52
Интересующийся
Отправить личное сообщение для zerojava Посмотреть профиль Найти все сообщения от zerojava
 
Регистрация: 26.05.2011
Сообщений: 20

в Вашем слой отображает только второй список, а мне нужно чтобы к примеру для пяти списков был свой набор слоев для каждой позиции в списке
Ответить с цитированием
  #5 (permalink)  
Старый 10.09.2012, 00:56
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

zerojava, а что вам мешает добавить/убрать элементы из списков и соответствующие слои из div-ов
Ответить с цитированием
  #6 (permalink)  
Старый 10.09.2012, 01:02
Интересующийся
Отправить личное сообщение для zerojava Посмотреть профиль Найти все сообщения от zerojava
 
Регистрация: 26.05.2011
Сообщений: 20

Спасибо большое, это как раз то что нужно
Ответить с цитированием
  #7 (permalink)  
Старый 10.09.2012, 01:08
Интересующийся
Отправить личное сообщение для zerojava Посмотреть профиль Найти все сообщения от zerojava
 
Регистрация: 26.05.2011
Сообщений: 20

Сообщение от lord2kim Посмотреть сообщение
zerojava, а что вам мешает добавить/убрать элементы из списков и соответствующие слои из div-ов
тоже разобрался, спасибо за помощь!
Ответить с цитированием
  #8 (permalink)  
Старый 10.09.2012, 21:30
Интересующийся
Отправить личное сообщение для zerojava Посмотреть профиль Найти все сообщения от zerojava
 
Регистрация: 26.05.2011
Сообщений: 20

Подскажите пожалуйста еще... Как сделать чтобы к примеру первый слой всегда отображался по умолчанию. Если в выпадающем списке отсутствует опция "no layer"
Ответить с цитированием
  #9 (permalink)  
Старый 10.09.2012, 22:04
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

<style>
	.next div {
		display: none;
	}
	.vis {
		display: block !important
	}
</style>

<script>
	function Selected(sel) {
		var next = sel.nextSibling.nextSibling; //nextElementSibling;
		var elems = next.getElementsByClassName('vis');//сделать кроссбраузерной
		if (elems.length != 0) {
			elems[0].className = '';
		}
		if (sel.options[0].text == 'no layer') {
			if (sel.selectedIndex != 0) {
				next.children[sel.selectedIndex - 1].className = 'vis';
			}
		} else {
			next.children[sel.selectedIndex].className = 'vis';
		}
	}
</script>

<form> 

<select name="layer" aria-required="true" onChange="Selected(this)">
	<option value="0" selected="selected">no layer</option>
	<option value="1">layer 1</option>
	<option value="2">layer 2</option>
	<option value="3">layer 3</option>
	<option value="4">layer 4</option>
</select>

<div class="next">
	<div id='Label1'><span class="note">layer 1</div>
	<div id='Label2'><span class="note">layer 2</div>
	<div id='Label3'><span class="note">layer 3</div>
	<div id='Label4'><span class="note">layer 4</div>
</div>

<select name="layer" aria-required="true" onChange="Selected(this)">
	<option value="1">layer 1</option>
	<option value="2">layer 2</option>
	<option value="3">layer 3</option>
	<option value="4">layer 4</option>
</select>

<div class="next">
	<div id='Label1' class="vis"><span class="note">layer 1</div>
	<div id='Label2'><span class="note">layer 2</div>
	<div id='Label3'><span class="note">layer 3</div>
	<div id='Label4'><span class="note">layer 4</div>
</div>




</form>

Последний раз редактировалось bes, 10.09.2012 в 22:06.
Ответить с цитированием
  #10 (permalink)  
Старый 10.09.2012, 22:11
Интересующийся
Отправить личное сообщение для zerojava Посмотреть профиль Найти все сообщения от zerojava
 
Регистрация: 26.05.2011
Сообщений: 20

bes еще раз большое Вам спасибо!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выделение строки <select> при выборе checkbox DarkMaster13 Общие вопросы Javascript 4 14.04.2014 03:30
Открытие полей формы при выборе определенного radio rolph Events/DOM/Window 4 15.06.2010 18:32
при выборе в 1-ом select соот.-щая инф. отображается в другом select celencer Общие вопросы Javascript 1 24.05.2009 20:38
Выделение строки <select> при выборе другого <select> simbion Элементы интерфейса 12 05.05.2009 03:43
раскрывать/скрывать <td> при выборе определенного элемента списка zip Элементы интерфейса 2 19.01.2009 13:58