Нужно так чтобы, в начале был один, 1-ый селект. Кторый бы имел определённые значения, например:
<select id="first">
<option value="0" selected disabled>Не выбрано</option>
<option value="1">Авто\Мото</option>
<option value="2">Компьютеры</option>
<option value="3">Знакомство</option>
</select>
А затем чтобы при выборе 1 значения, появлялся селект с его разделами.
Например: я выбрал "Авто\Мото", и тогда второй селект был такой:
<select id="second">
<option value="0" selected disabled>Не выбрано</option>
<option value="1">BMW X5</option>
<option value="2">Jaguar F5</option>
<option value="3">Lamborgini</option>
</select>
И самый важный момент. Если я выбрал , скажем "BMW X5" то появлялось скрытое содержимое раздела "BMW X5"
На данный момент получилась только с селектоми.
|
Код:
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#second {
display: none;
}
</style>
</head>
<body>
<select id="first">
<option value="0" selected >Не выбрано</option>
<option value="1">Авто\Мото</option>
<option value="2">Компьютеры</option>
<option value="3">Знакомство</option>
</select>
<select id="second"></select>
<script>
var autos = 'Не выбрано, BMW X5, Jaguar F5, Lamborgini Italian'.split(', ');
var computers = 'Не выбрано, Windows, Mac, Linux'.split(', ');
var connexions = 'Не выбрано, Love, Meeting, Sex'.split(', ');
var two = [autos,computers,connexions]
document.getElementById('first').onchange = function(){
var select = document.getElementById('second'),
j = this.value;
select.style.display = "none";
select.options.length = 0;
if (j) {
var options = two[--j];
for (var i = 0; i < options.length; i++) {
select.options[i] = new Option(options[i], i); ;
}
select.style.display = "inline-block";
}
}
</script>
<br><hr>
<div id='autos' style='display: none;'>Скрытое сод-мое BMW X5</div>
<div id='autos' style='display: none;'>Скрытое сод-мое Jaguar F5</div>
<div id='autos' style='display: none;'>Скрытое сод-мое Lamborgini</div>
<div id='computers' style='display: none;'>Скрытое сод-мое Windows</div>
<div id='computers' style='display: none;'>Скрытое сод-мое Mac</div>
<div id='computers' style='display: none;'>Скрытое сод-мое Windows</div>
<div id='connexions' style='display: none;'>Скрытое сод-мое Love</div>
<div id='connexions' style='display: none;'>Скрытое сод-мое Meeting</div>
<div id='connexions' style='display: none;'>Скрытое сод-мое Sex</div>
</body>
</html> |
Как показать скрытое содержимое? при выборе , например "BMW X5" ?
Ели ели написал.. Сформулировать никак не мог )