05.09.2013, 14:20
|
 |
Аспирант
|
|
Регистрация: 05.09.2013
Сообщений: 95
|
|
|
Скрыть/показать элементы в зависимости от значения select ов (нескольких)
Необходимо разместить на HTML сайте 2 и более фильтров по которым будет фильтроваться содержимое. Но только с помощью js.
Я мудрил и вот что вышло:
|
Код:
|
<!DOCTYPE html>
<head>
<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';
} 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';
}
}</script>
</head>
<body>
<span style="font-size: 12pt;">Выберите категорию:</span>
<select id="first" class="Validate_Required " name="Dest" aria-required="true" onChange="Selected(this)">
<option value="0" selected disabled>Не выбрано</option>
<option value="1">Авто\Мото</option>
<option value="2">Компьютеры</option>
<option value="3">Знакомство</option>
</select>
<span style="font-size: 12pt;">Выберите раздел:</span>
<select id="second" class="Validate_Required " name="Dest" aria-required="true" onChange="Selected(this)">
<option value="0" selected disabled>Не выбрано</option>
<option value="3">Дружба\Любовь</option>
<option value="1">BMW X5</option>
<option value="2">Microsoft</option>
</select>
<br><hr>
<div id='Label1' style='display: none;'>BMW X5</div>
<div id='Label2' style='display: none;'>Jaguar F5</div>
<div id='Label3' style='display: none;'>Lamborgini Italian</div>
</body>
</html> |
Нужно чтобы во втором фильтре отображались разделы, относящиеся к выбранной категориии в фильтре №1.
Последний раз редактировалось Georka, 05.09.2013 в 14:22.
|
|
05.09.2013, 15:09
|
 |
Профессор
|
|
Регистрация: 23.06.2011
Сообщений: 1,165
|
|
<!DOCTYPE html>
<html>
<head>
<style>
select, div {
display: inline-block;
}
</style>
</head>
<body>
<select id="first">
<option value="0" selected disabled>Не выбрано</option>
<option value="1">Авто\Мото</option>
<option value="2">Компьютеры</option>
<option value="3">Знакомство</option>
</select>
<div id="second"></div>
<script>
var autos = 'BMW X5, Jaguar F5, Lamborgini Italian'.split(', ');
var computers = 'Windows, Mac, Linux'.split(', ');
var connexions = 'Love, Meeting, Sex'.split(', ');
document.getElementById('first').onchange = function(){
var str = '';
if (this.value == 1) {
for (var i = 0; i < autos.length; i++) {
str += '<option value="i">' + autos[i];
}
} else if (this.value == 2) {
for (var i = 0; i < computers.length; i++) {
str += '<option value="i">' + computers[i];
}
} else if (this.value == 3) {
for (var i = 0; i < connexions.length; i++) {
str += '<option value="i">' + connexions[i];
}
} else return false;
document.getElementById('second').innerHTML = '<select>' + str + '</select>';
}
</script>
</body>
</html>
|
|
05.09.2013, 15:32
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
<!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>
</body>
</html>
Последний раз редактировалось рони, 05.09.2013 в 15:35.
|
|
05.09.2013, 20:51
|
|
Аспирант
|
|
Регистрация: 05.09.2013
Сообщений: 95
|
|
СПАСИБо =) добрые люди  А как теперь отобразить и прописать содержимое , чтобы при выборе например: BMW X5 - отображался раздел который относиться к разделу BMW X5.
Последний раз редактировалось Georka, 05.09.2013 в 21:07.
|
|
05.09.2013, 21:24
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
Georka,
нужно написать функцию для второго селектора 
|
|
05.09.2013, 21:34
|
|
Профессор
|
|
Регистрация: 23.06.2011
Сообщений: 1,165
|
|
|
Сообщение от Georka
|
|
А как теперь отобразить и прописать содержимое , чтобы при выборе например: BMW X5 - отображался раздел который относиться к разделу BMW X5.
|
Это уже неинтересно. Для второго селекта делаете аналогично onchange-функцию, в которую вставляете показ нужного раздела через display: block или через переход по ссылке. |
|
05.09.2013, 21:52
|
|
Аспирант
|
|
Регистрация: 05.09.2013
Сообщений: 95
|
|
рони,
Ну поогите ) нужно чтобы было так:
выбрал категорию авто, раздел BMW и отображалось содержимое с описанием BMW
Выбрал категорию компьюеры , раздел windows и там содержимое c описанием windows
Плиз хэлп =)
|
|
05.09.2013, 22:36
|
|
Интересующийся
|
|
Регистрация: 05.08.2013
Сообщений: 19
|
|
используй цикл:
<div id='Label1' onclick="updateVis(this.id)">BMW X5</div>
<div id='Label2' onclick="updateVis(this.id)">Jaguar F5</div>
<div id='Label3' onclick="updateVis(this.id)">Lamborgini</div>
<script>
function updateVis(){
switch(id){
case 'Label1':
for (var i = 1; i<4; i++){
document.getElementById('Label' + i).style.display = 'none';
}
document.getElementById("Label1").style.display='b lock';
break;
case 'Label2':
for (var i = 1; i<4; i++){
document.getElementById('Label' + i).style.display = 'none';
}
document.getElementById("Label2").style.display='b lock';
break;
default: for (var i = 1; i<4; i++){
document.getElementById('Label' + i).style.display = 'none';
}
}
</script> |
|
06.09.2013, 00:20
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
Зависимые селекты
|
Сообщение от BETEPAH
|
|
Это уже неинтересно.
|
согласен 
Georka,
<!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">
<option value="0" selected >Не выбрано</option>
</select>
<div id='autos1' style='display: none;'>BMW X5</div>
<div id='autos2' style='display: none;'>Jaguar F5</div>
<div id='autos3' style='display: none;'>Lamborgini Italian</div>
<div id='computers1' style='display: none;'>Windows</div>
<div id='computers2' style='display: none;'>Mac</div>
<div id='computers3' style='display: none;'>Linux</div>
<div id='connexions1' style='display: none;'>Love</div>
<div id='connexions2' style='display: none;'>Meeting</div>
<div id='connexions3' style='display: none;'>Sex</div>
<script>
(function ()
{
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];
var group = 'autos,computers,connexions'.split(',');
var j;
var old;
document.getElementById('first').onchange = function(){
var select = document.getElementById('second');
j = this.value;
select.style.display = "none";
old && (old.style.display = "none");
select.options.length = 1;
if (j) {
var options = two[--j];
for (var i = 1; i <= options.length; i++) {
select.options[i] = new Option(options[i-1], i); ;
}
select.style.display = "inline-block";
}
}
document.getElementById('second').onchange = function(){
old && (old.style.display = "none");
old = document.getElementById(group[j]+this.value);
old && (old.style.display = "block");
}
})()
</script>
</body>
</html>
Последний раз редактировалось рони, 06.09.2013 в 00:22.
|
|
|
|
