Скрыть показать блок при выбора пункта из списка
Здравствуйте не могли помочь со скриптом надо что бы показывались и скрывались блоки при выборе из списка значения
<select id="CategoryTree" name="category_sid[tree][1]">
<option value="0">Все категории</option>
<option selected="selected" title="/Car/" value="4"> Автомобили(3)</option>
<option title="/Motorcycle/" value="8"> Мотоциклы(2)</option>
<option title="/Trucks/" value="13"> Грузовики(1)</option>
</select>
<div id="avto" style="display:block">инфо об Автомобилях</div>
<div id="moto" style="display:none">инфо о Мото</div>
<div id="trucks" style="display:none">инфо о Грузовиках</div>
|
nurik2120,
Это уже неинтересно |
Цитата:
<!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>
но тут при выборе из списка значения выходит другой список а мне над что бы менялся стиль у блока на display="block" Спасибо за внимание |
nurik2120,
:cray: :cray: :cray:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<select id="CategoryTree" name="category_sid[tree][1]">
<option value="0">Все категории</option>
<option selected="selected" title="/Car/" value="4"> Автомобили(3)</option>
<option title="/Motorcycle/" value="8"> Мотоциклы(2)</option>
<option title="/Trucks/" value="13"> Грузовики(1)</option>
</select>
<div id="avto" style="display:block">инфо об Автомобилях</div>
<div id="moto" style="display:none">инфо о Мото</div>
<div id="trucks" style="display:none">инфо о Грузовиках</div>
<script>
document.getElementById("CategoryTree")
.onchange = function () {
var b = {
4: "avto",
8: "moto",
13: "trucks"
}, c = this.value,
a;
for (a in b) document.getElementById(b[a])
.style.display = 0 == c || c == a ? "block" : "none"
};
</script>
</body>
</html>
|
Помогите плиз, сижу уже третий день с этой проблемой :) Делаю каталог недвижки, и нужно фильтровать по двум селектам, то есть выбираем сезон, выбираем срок аренды - и нам показывается один из 9 поисков по 9 ценам. В общем все работает нормально, но только на Feedler , на сайте работать не хочет ни в какую. Сайт тут .
Ошибок при загрузке JQuery нет, при загрузке скрипта тоже, он грузится отдельным select.js Вот такой вот код: HTML:
<select id="term" name="form_select">
<option value="0">Choose term</option>
<option value="1">Month</option>
<option value="2">Week</option>
<option value="3">Day</option>
</select>
<select id="season" name="form_select">
<option value="0">Choose season</option>
<option value="1">Low</option>
<option value="2">Hight</option>
<option value="3">Peak</option>
</select>
<div id="ad_lowmonth">tr_ad_lowmonth</div>
<div id="ad_lowweek">tr_ad_lowweek</div>
<div id="ad_lowday">tr_ad_lowday</div>
<div id="ad_hightmonth">tr_ad_hightmonth</div>
<div id="ad_hightweek">tr_ad_hightweek</div>
<div id="ad_hightday">tr_ad_hightday</div>
<div id="ad_peakmonth">tr_ad_peakmonth</div>
<div id="ad_peakweek">tr_ad_peakweek</div>
<div id="ad_peakday">tr_ad_peakday</div>
JS:
$('#term, #season').on('change', function() {
$('div[id^="ad_"]:gt(3)').css("display","none");
var term = $.trim( $('#term :selected').text().toLowerCase() ),
season = $.trim( $('#season :selected').text().toLowerCase() );
if($('#term :selected').val() > 0 && $('#season :selected').val() > 0) {
var $sel = '#ad_' + season + term;
$($sel).css("display","block");
}
});
CSS:
#ad_lowmonth,
#ad_lowweek,
#ad_lowday,
#ad_hightmonth,
#ad_hightweek,
#ad_hightday,
#ad_peakmonth,
#ad_peakweek,
#ad_peakday {
display:none;
}
|
AnimalInstinct,
Цитата:
|
Цитата:
|
AnimalInstinct,
вы посмотрите код который в Result находится может наведёт на какие мысли |
Еще проблема тоже непонятно почему при первом выборе двух селектов показывается DIV , выбираем во втором селекторе например другой вариант, открывается новый DIV , а предыдущий не исчезает, хотя по идее он должен стать display:none
|
Цитата:
|
| Часовой пояс GMT +3, время: 14:51. |