Форум

Redd · #1 (**permalink**) 08.12.2015, 11:13

Добрый день. При выборе опции в селекте должны скрываться определенные группы. Работает, но не корректно. Какие то div'ы скрываются, а какие то остаются.

<style>
div {
  display: block;
}
</style>
<div class="container">
  <h1 class="page-header">Продажа средств измерений</h1>
  <select class="form-control" id="CategoryTree">
    <option selected="selected" class="all active" value="0">Все дозиметры</option>
    <option value="1">Дозиметры для банков <span class="badge">2</span></option>
    <option value="2">Индивидуальная дозиметрия <span class="badge">3</span></option>
  </select>
</div>
<div class="row">
  <div id="bank">
    <h3>
       <a href="#">Дозиметр для банков 1</a>
    </h3>
    <p>Для банка</p>
  </div>
  <div id="individ">
    <h3>
       <a href="#">Индивидуальный 1</a>
    </h3>
    <p>Индивид</p>
  </div>
</div>
<div class="row">
  <div id="individ">
    <h3>
      <a href="#">Индивидуальный 2</a>
    </h3>
    <p>Индивид</p>
  </div>
  <div id="bank">
    <h3>
      <a href="#">Дозиметр для банков 2</a>
    </h3>
    <p>Для банка</p>
  </div>
</div>
<div class="row">
  <div id="individ">
    <h3>
       <a href="#">Индивидуальный 3</a>
    </h3>
    <p>Индивид</p>
  </div>
</div>

document.getElementById("CategoryTree")
.onchange = function() {
var b = {
1: "bank",
2: "individ"
  },
c = this.value,
 a;
for (a in b) document.getElementById(b[a])
.style.display = 0 == c || c == a ? "block" : "none"
};

рони · #2 (**permalink**) 08.12.2015, 11:21

Redd,
на всякий случай span в option невозможен и id уникально.

Redd · #3 (**permalink**) 08.12.2015, 14:51

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

Redd,
на всякий случай span в option невозможен и id уникально.

совершенно забыл про id
Немного переписал, но все равно не работает: http://jsfiddle.net/3dye6u3L/

<select id="items">
  <option selected="selected" value="0">Все категории</option>
  <option title="Car" value="1">Автомобили</option>
  <option title="Motorcycle" value="2">Мотоциклы</option>
</select>
<div data-category="avto">Автомобиль 1</div>
<div data-category="avto">Автомобиль 2</div>
<div data-category="avto">Автомобиль 3</div>
<div data-category="avto">Автомобиль 4</div>
<div data-category="moto">Мотоцикл 1</div>
<div data-category="moto">Мотоцикл 2</div>
<div data-category="moto">Мотоцикл 3</div>

$(function() {
  function showContent() {
    var selectCategory = $("#items").val();
    switch (selectCategory) {
      case "0": 
        $('[data-category="avto"]').show();
        $('[data-category="moto"]').show();
        break;
      case "1": 
        $('[data-category="avto"]').show();
        $('[data-category="moto"]').hide();
        break;
      case "2": 
        $('[data-category="avto"]').hide();
        $('[data-category="moto"]').show();
        break;
    }
  }
  showContent();
  $("#items").change(function() {
    showContent();
  });
});

рони · #4 (**permalink**) 08.12.2015, 14:59

Redd,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
      $("#items").change(function() {
     $(".avto,.moto").not($(this.value).show()).hide()
  });

});


  </script>
</head>

<body>  <select id="items">
  <option selected="selected" value=".avto, .moto">Все категории</option>
  <option value=".avto">Автомобили</option>
  <option value=".moto">Мотоциклы</option>
</select>
<div class="avto">Автомобиль 1</div>
<div class="avto">Автомобиль 2</div>
<div class="avto">Автомобиль 3</div>
<div class="avto">Автомобиль 4</div>
<div class="moto">Мотоцикл 1</div>
<div class="moto">Мотоцикл 2</div>
<div class="moto">Мотоцикл 3</div>



</body>

</html>

Redd · #5 (**permalink**) 08.12.2015, 15:07

рони,
Спасибо большое, добрый человек! Выручил

Форум

Справочник

Discord чат

Курсы javascript