Javascript-форум - Подскажите решение с кодом

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Подскажите решение с кодом (https://javascript.ru/forum/dom-window/54146-podskazhite-reshenie-s-kodom.html)

Подскажите решение с кодом

Добрый день! Подскажите с кодом:
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
как правильней сделать?

Цитата:

Сообщение от Karen8

var model = jQuery('#auto').val() || [];
if (model != null) {

А model тут никак не будет равна null )) Ибо если val будет пустой строкой, то model станет [], т.е. пустым массивом. А он близко не равен null.

там есть ситуация я просто опустил за ненадобностью
<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>

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>

<!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>

рони, если value не указать, то оно берется из текста опшна. В итоге получаем filter('Выберите марку'):D

По поводу решения - считаю что нужно абстрагироваться от каких-то там классов в атрибутах value. И у li их задавать незачем - избыточная информация.

<!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>

Огромная благодарность вам!
Наладил, но что то не то, глюки есть, несколько раз перебираю селекты начинает все путаться
Вот весь мой код:

<!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>

<option value='null'>Выберите модель</option>

if (el.val() != null)

Это не null, это строковое значение и не пустое.

Зависимые селекторы

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>