05.03.2015, 15:05
|
|
Новичок на форуме
|
|
Регистрация: 05.03.2015
Сообщений: 5
|
|
|
Подскажите решение с кодом
Добрый день! Подскажите с кодом:
js:
var model = jQuery('#auto').val() || [];
if (model != null) {
jQuery('#list').find('li').not('.' + model).hide();
jQuery('#list').find('.' + model).show();
html:
<select id='auto'>
<option style='display:none' value='1,3,4' >A4</option>
<option style='display:none' value='2,3' >A6</option>
</select>
<ul id='list'>
<li style='display:none' class='1'>С/у глушителя</li>
<li style='display:none' class='2'>С/у резонатора</li>
<li style='display:none' class='3'>С/у приемной трубы</li>
<li style='display:none' class='4'>С/у коллектора</li>
</ul>
Сейчас при селекте A4 показывается class 1, а нужно чтобы показались классы из value т.е. 1,2,4
как правильней сделать? |
|
05.03.2015, 15:19
|
 |
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
|
Сообщение от Karen8
|
var model = jQuery('#auto').val() || [];
if (model != null) {
|
А model тут никак не будет равна null )) Ибо если val будет пустой строкой, то model станет [], т.е. пустым массивом. А он близко не равен null.
__________________
В личку только с интересными предложениями 
|
|
05.03.2015, 15:32
|
|
Новичок на форуме
|
|
Регистрация: 05.03.2015
Сообщений: 5
|
|
|
там есть ситуация я просто опустил за ненадобностью
<select id='auto'>
<option style='display:none' value='null' class='null'>Выберите марку</option>
<option style='display:none' value='1,3,4' >A4</option>
<option style='display:none' value='2,3' >A6</option>
</select>
|
|
05.03.2015, 16:13
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,070
|
|
Karen8,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#list li {
display: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var auto = $("#auto"), li = $("#list li");
auto.change(function() {
li.hide()
.filter(this.value).show();
}).change();
});
</script>
</head>
<body>
<select id='auto'>
<option >Выберите марку</option>
<option value='.a, .b, .d' >A4</option>
<option value='.b, .c' >A6</option>
</select>
<ul id='list' onchange="">
<li class='a'>С/у глушителя</li>
<li class='b'>С/у резонатора</li>
<li class='c'>С/у приемной трубы</li>
<li class='d'>С/у коллектора</li>
</ul>
</body>
</html>
|
|
05.03.2015, 16:57
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var auto = $("#auto"), li = $("#list li");
auto.change(function() {
var selected = this.value ? $.map(this.value.split(','), Number) : null;
li.each(function(index) {
$(this).toggle(!selected || $.inArray(index + 1, selected) != -1);
});
}).change();
});
</script>
</head>
<body>
<select id='auto'>
<option value="">Выберите марку</option>
<option value='1,3,4'>A4</option>
<option value='2,3'>A6</option>
</select>
<ul id='list' onchange="">
<li>С/у глушителя</li>
<li>С/у резонатора</li>
<li>С/у приемной трубы</li>
<li>С/у коллектора</li>
</ul>
</body>
</html>
__________________
В личку только с интересными предложениями
|
|
05.03.2015, 16:59
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
рони, если value не указать, то оно берется из текста опшна. В итоге получаем filter('Выберите марку') 
По поводу решения - считаю что нужно абстрагироваться от каких-то там классов в атрибутах value. И у li их задавать незачем - избыточная информация.
__________________
В личку только с интересными предложениями
|
|
05.03.2015, 17:37
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,070
|
|
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var auto = $("#auto"),
li = $("#list li");
auto.change(function() {
li.hide();
this.value && $.map(this.value.split(','), function(el, i) {
return $(li[el - 1]).show()
})
}).change();
});
</script>
</head>
<body>
<select id='auto'>
<option value="">Выберите марку</option>
<option value='1,3,4'>A4</option>
<option value='2,3'>A6</option>
</select>
<ul id='list' onchange="">
<li>С/у глушителя</li>
<li>С/у резонатора</li>
<li>С/у приемной трубы</li>
<li>С/у коллектора</li>
</ul>
</body>
</html>
|
|
05.03.2015, 18:14
|
|
Новичок на форуме
|
|
Регистрация: 05.03.2015
Сообщений: 5
|
|
Огромная благодарность вам!
Наладил, но что то не то, глюки есть, несколько раз перебираю селекты начинает все путаться
Вот весь мой код:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
function set_car()
{
var el = jQuery('#car');
if (el.val() != null) {
var auto = jQuery('#auto');
auto.find('option').not('.' + jQuery(el).val()).hide();
auto.find('option.' + jQuery(el).val()).show();
auto.val(jQuery('#auto').find('option.' + jQuery(el).val()).eq(0).val());
} else {
jQuery('#auto').find('option').not('.null').hide();
jQuery('#auto').val('null');
}
}
$(function() {
var model = $("#auto"),
li = $("#list li");
model.change(function() {
li.hide();
this.value && $.map(this.value.split(','), function(el, i) {
return $(li[el - 1]).show()
})
}).change();
});
</script>
</head>
<body>
<select id='car' onchange='set_car()'>
<option value='null'>Выберите модель</option>
<option value='audi'>Audi</option>
<option value='bmw'>BMW</option>
</select>
<select id='auto' onchange='set_model()'>
<option value='null' class='null'>Выберите марку</option>
<option value='3,1' class='audi'>A4 1,8 turbo</option>
<option value='4,2' class='audi'>A6 3,0 с 2004 г</option>
<option value='1,4' class='audi'>A7</option>
<option value='4,3' class='bmw'>X5 3,0 E53</option>
<option value='4,2' class='bmw'>5 E39, E46</option>
<option value='3,2' class='bmw'>X5 4,4</option>
<option value='1,4' class='bmw'>X5 3,0 d</option>
</select>
<ul id='list' onchange="">
<li>С/у глушителя</li>
<li>С/у резонатора</li>
<li>С/у приемной трубы</li>
<li>С/у коллектора</li>
</ul>
</body>
</html>
|
|
05.03.2015, 18:34
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
<option value='null'>Выберите модель</option>
if (el.val() != null)
Это не null, это строковое значение и не пустое.
|
|
05.03.2015, 19:20
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,070
|
|
|
Зависимые селекторы
Karen8,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var model = $("#auto"),
car = $("#car"),
li = $("#list li"),
option = $("option:gt(0)", model);
car.change(function() {
model.hide();li.hide();
option.remove();
this.value && model.append(option.filter("." + this.value)).show()
}).change();
model.change(function() {
li.hide();
this.value && $.map(this.value.split(","), function(el, i) {
return $(li[el - 1]).show()
})
}).change()
});
</script>
</head>
<body>
<select id='car' >
<option value=''>Выберите модель</option>
<option value='audi'>Audi</option>
<option value='bmw'>BMW</option>
</select>
<select id='auto' >
<option value=''>Выберите марку</option>
<option value='3,1' class='audi'>A4 1,8 turbo</option>
<option value='4,2' class='audi'>A6 3,0 с 2004 г</option>
<option value='1,4' class='audi'>A7</option>
<option value='4,3' class='bmw'>X5 3,0 E53</option>
<option value='4,2' class='bmw'>5 E39, E46</option>
<option value='3,2' class='bmw'>X5 4,4</option>
<option value='1,4' class='bmw'>X5 3,0 d</option>
</select>
<ul id='list' onchange="">
<li>С/у глушителя</li>
<li>С/у резонатора</li>
<li>С/у приемной трубы</li>
<li>С/у коллектора</li>
</ul>
</body>
</html>
Последний раз редактировалось рони, 05.03.2015 в 19:26.
|
|
|
|
