Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Скрытие элемента при выборе option в select (https://javascript.ru/forum/dom-window/75842-skrytie-ehlementa-pri-vybore-option-v-select.html)

html'щик 11.11.2018 12:58
Скрытие элемента при выборе option в select
 
Здравствуйте (сразу скажу я немного далек от темы js), есть два списка select (первый видимый, второй невидимый), при выборе первой option в первом селекте нужно чтобы второй селект становился видимым. Помогите пожалуйста
<select>
	  <option>От звука</option>
	  <option>В тональности</option>
  </select>
	<select>
		<optgroup label="До">
		<option>До&#119083</option>
		<option>До&#9837</option>
		<option>До</option>
		<option>До&#9839</option>
		<option>До&#119082</option>
		</optgroup>
		<optgroup label="Ре">
		<option>Ре&#119083</option>
		<option>Ре&#9837</option>
		<option>Ре</option>
		<option>Ре&#9839</option>
		<option>Ре&#119082</option>
		</optgroup>
		<optgroup label="Ми">
		<option>Ми&#119083</option>
		<option>Ми&#9837</option>
		<option>Ми</option>
		<option>Ми&#9839</option>
		<option>Ми&#119082</option>
		</optgroup>
		<optgroup label="Фа">
		<option>Фа&#119083</option>
		<option>Фа&#9837</option>
		<option>Фа</option>
		<option>Фа&#9839</option>
		<option>Фа&#119082</option>
		</optgroup>
		<optgroup label="Соль">
		<option>Соль&#119083</option>
		<option>Соль&#9837</option>
		<option>Соль</option>
		<option>Соль&#9839</option>
		<option>Соль&#119082</option>
		</optgroup>
		<optgroup label="Ля">
		<option>Ля&#119083</option>
		<option>Ля&#9837</option>
		<option>Ля</option>
		<option>Ля&#9839</option>
		<option>Ля&#119082</option>
		</optgroup>
		<optgroup label="Си">
		<option>Си&#119083</option>
		<option>Си&#9837</option>
		<option>Си</option>
		<option>Си&#9839</option>
		<option>Си&#119082</option>
		</optgroup>
	</select>

j0hnik 11.11.2018 13:06 
<select>
	  <option>От звука</option>
	  <option>В тональности</option>
  </select>
	<select>
		<optgroup label="До">
		<option>До&#119083</option>
		<option>До&#9837</option>
		<option>До</option>
		<option>До&#9839</option>
		<option>До&#119082</option>
		</optgroup>
		<optgroup label="Ре">
		<option>Ре&#119083</option>
		<option>Ре&#9837</option>
		<option>Ре</option>
		<option>Ре&#9839</option>
		<option>Ре&#119082</option>
		</optgroup>
		<optgroup label="Ми">
		<option>Ми&#119083</option>
		<option>Ми&#9837</option>
		<option>Ми</option>
		<option>Ми&#9839</option>
		<option>Ми&#119082</option>
		</optgroup>
		<optgroup label="Фа">
		<option>Фа&#119083</option>
		<option>Фа&#9837</option>
		<option>Фа</option>
		<option>Фа&#9839</option>
		<option>Фа&#119082</option>
		</optgroup>
		<optgroup label="Соль">
		<option>Соль&#119083</option>
		<option>Соль&#9837</option>
		<option>Соль</option>
		<option>Соль&#9839</option>
		<option>Соль&#119082</option>
		</optgroup>
		<optgroup label="Ля">
		<option>Ля&#119083</option>
		<option>Ля&#9837</option>
		<option>Ля</option>
		<option>Ля&#9839</option>
		<option>Ля&#119082</option>
		</optgroup>
		<optgroup label="Си">
		<option>Си&#119083</option>
		<option>Си&#9837</option>
		<option>Си</option>
		<option>Си&#9839</option>
		<option>Си&#119082</option>
		</optgroup>
	</select>

	<script>
var sel = document.querySelectorAll('select');
sel[0].onchange = function(){
	sel[1].style.display = this.selectedIndex ? 'none':'inline-block';
};
	</script>

html'щик 11.11.2018 13:17
Большое спасибо, все работает:dance: . А вы можете объяснить суть работы скрипта, просто еще надо сделать, чтобы при выборе каждой option во втором селекторе появлялась соответствующая картинка. Попытался понять сам, но не понял:blink:

j0hnik 11.11.2018 13:20
с картинкой надо будет немного по другому.

html'щик 11.11.2018 13:22
Можете написать как? А то весь интернет перерыл, инфы не нашел.

j0hnik 11.11.2018 13:36 
<select>
	  <option>От звука</option>
	  <option>В тональности</option>
  </select>
	<select>
		<optgroup label="До">
		<option>До&#119083</option>
		<option>До&#9837</option>
		<option>До</option>
		<option>До&#9839</option>
		<option>До&#119082</option>
		</optgroup>
		<optgroup label="Ре">
		<option>Ре&#119083</option>
		<option>Ре&#9837</option>
		<option>Ре</option>
		<option>Ре&#9839</option>
		<option>Ре&#119082</option>
		</optgroup>
		<optgroup label="Ми">
		<option>Ми&#119083</option>
		<option>Ми&#9837</option>
		<option>Ми</option>
		<option>Ми&#9839</option>
		<option>Ми&#119082</option>
		</optgroup>
		<optgroup label="Фа">
		<option>Фа&#119083</option>
		<option>Фа&#9837</option>
		<option>Фа</option>
		<option>Фа&#9839</option>
		<option>Фа&#119082</option>
		</optgroup>
		<optgroup label="Соль">
		<option>Соль&#119083</option>
		<option>Соль&#9837</option>
		<option>Соль</option>
		<option>Соль&#9839</option>
		<option>Соль&#119082</option>
		</optgroup>
		<optgroup label="Ля">
		<option>Ля&#119083</option>
		<option>Ля&#9837</option>
		<option>Ля</option>
		<option>Ля&#9839</option>
		<option>Ля&#119082</option>
		</optgroup>
		<optgroup label="Си">
		<option>Си&#119083</option>
		<option>Си&#9837</option>
		<option>Си</option>
		<option>Си&#9839</option>
		<option>Си&#119082</option>
		</optgroup>
	</select>
<img id="imgSel" alt="4">
	<script>
var sel = document.querySelectorAll('select');
sel[0].onchange = function(){
	sel[1].style.display = this.selectedIndex ? 'none':'inline-block';
	imgSel.style.display = this.selectedIndex ? 'none':'inline-block';
};

sel[1].onchange = function(){
	imgSel.src = 'image/'+this.selectedIndex+'.jpg';
};
	</script>

можно вот так сделать, и картинки называть 0.jpg, 1.jpg итд

рони 11.11.2018 13:43
html'щик,
искать кастомизация селекта
https://ruseller.com/lessons.php?id=805&rub

рони 11.11.2018 13:46
html'щик, ник у вас для данного форума неудачный, по техническим причинам!!!


Часовой пояс GMT +3, время: 17:46.