Показать сообщение отдельно
  #10 (permalink)  
Старый 05.03.2015, 19:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

Зависимые селекторы
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.
Ответить с цитированием