Скрыть показать блок при выбора пункта из списка
Здравствуйте не могли помочь со скриптом надо что бы показывались и скрывались блоки при выборе из списка значения
<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
|
Цитата:
|
AnimalInstinct,
мда --- вы запускаите скрипт когда элементов нет на странице -- в окне Result находится код который запускает ваш скрипт когда страница готова . вот так можно
$(function () {
$('#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");
}
});
});
|
Цитата:
|
AnimalInstinct,
jquery грузить несколько раз на странице тоже бы ненужно - но это долгая история и начать её нужно хотябы отсюда http://learn.javascript.ru/ |
Да, я только начинаю знакомство с Javacsript, сейчас вот Codeacademy прохожу :) Вообще сайтами уже третий год занимаюсь, но скриптами все время чужими пользовался и не понимал как они работают, сейчас буду матчасть изучать, ибо понимаю что без JS уже как без рук. Несколько раз загружено так как я уже все начал перебирать, думаю остановлюсь на загрузке 1.11.1 c Google.
|
Странно, но когда в select меняешь текст, не значение, а содержимое блока, с английского на русский, то почему то перестает работать. Не знаете в чем может быть дело?
var term = $.trim( $('#term :selected').text().toLowerCase() ),
season = $.trim( $('#season :selected').text().toLowerCase() );
Я подозреваю что вот тут присваивает переменным значение содержимого блока, можно ли как то на select и его value переделать? |
AnimalInstinct,
$('#term').val().toLowerCase()
|
Так, value не вариант , он нужен цифровой, наверное не value а label нужно использовать. Вот последний вариант на русском языке, может кому еще пригодится.
На Fiddle |
Немного не в тему, но как можно объединить эти ID в один, чтобы скрипт это понял?
#ad_lowmonth, #ad_lowweek, #ad_lowday, #ad_hightmonth, #ad_hightweek, #ad_hightday, #ad_peakmonth, #ad_peakweek, #ad_peakday Решил добавить UI slider, а поля ввода скрыть, но для каждого слайдера приходится писать свою функцию, как бы все это объединить в одну? Вот тут пример На JsFiddle |
AnimalInstinct,
1 присвоить класс или в кавычках через запятую $('#ad_lowmonth, #ad_lowweek, #ad_lowday, #ad_hightmonth, #ad_hightweek, #ad_hightday, #ad_peakmonth, #ad_peakweek, #ad_peakday') или $('[id^="ad_"]') |
Пришлось все таки делать отдельную функцию для каждого слайдера, так как поля то разные, всего 18 полей.
Осталось дело за малым :) Теперь когда выбираешь например Неделя->Высокий сезон , а потом не переключая неделю выбираем Низкий сезон, то добавляется еще один слайдер, а тот который высокий сезон не исчезает, как бы сделать так чтобы он все таки исчезал по нормальному, чтобы показывался только один DIV? Код сегодня тут на Codepen так как JsFiddle весь день висит :) |
Никто не знает?
|
Ну же, неужели никто не знает?
|
AnimalInstinct,
:-?
if ($('#term :selected').val() > 0 && $('#season :selected').val() > 0) {
var $sel = '#slide_' + season + term;
$('[id^="slide_"]').css({display:'none'})
$($sel).css("display", "block");
}
|
Спасибо огромное Рони! Опять выручили! :thanks:
|
Здравствуйте!
Подскажите, пожалуйста, как сделать разкрывающий строчки список, как на сайте htmlbook. Заранее спасибо!  |
Цитата:
т.е. после клика на чем то что должно исчезнуть или что то должно появится. Обычно ищут уже готовые скрипты которые реализуют нужный функционал например «javascript tree view» |
| Часовой пояс GMT +3, время: 16:01. |