Javascript-форум - Контент в зависимости от вибранго селекта

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

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

- - Контент в зависимости от вибранго селекта (https://javascript.ru/forum/dom-window/54957-kontent-v-zavisimosti-ot-vibrango-selekta.html)

Контент в зависимости от вибранго селекта

Мне нужно сделать два селекта, и когда выбрал из них нужные значения, нажимаешь но кнопку - показывается произвольный текст. На деле должно выглядеть вот так http://prntscr.com/6qu3ac . Как такое можно реализовать, желательно без перезагрузок, чтоб весь код и возможные тексты на одной странице.

Цитата:

Сообщение от рони (Сообщение 365543)

vasyakrn,
http://javascript.ru/forum/dom-windo...tml#post271084

Там все очень сложно. Мне кажется с помощю jQuery можно упростить

Вот мой код

<select class="info-ruler">
    <option value="a">Info 1</option>
    <option value="b">Info 2</option>
    <option value="с">Info 3</option>
</select>

<select class="info-ruler">
    <option value="1">Info 1</option>
    <option value="2">Info 2</option>
</select>

<div class="info" id="a-1">Information block 1</div>
<div class="info" id="a-2">Information block 2</div>
<div class="info" id="b-1">Information block 4</div>
<div class="info" id="b-2">Information block 5</div>
<div class="info" id="c-1">Information block 6</div>
<div class="info" id="c-2">Information block 7</div>

<input type="submit" value="Генерирувать">

vasyakrn,
и в чём проблема ?

Цитата:

Сообщение от рони (Сообщение 365557)

vasyakrn,
и в чём проблема ?

В незнании js. Помогите пожалуйста

Открывашка 210 выбор селекторами

vasyakrn,
на всякий случай у вас ошибка в 4 строке

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .info  {
    display: none;

  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var but = $('[type="submit"]'), sel = $('.info-ruler'), info = $('.info');
       but.click(function() {
         info.hide();
         $('#' + sel[0].value + '-' + sel[1].value).show();
      });
});


  </script>
</head>

<body>
<select class="info-ruler">
    <option value="a">Info 1</option>
    <option value="b">Info 2</option>
    <option value="c">Info 3</option>
</select>

<select class="info-ruler">
    <option value="1">Info 1</option>
    <option value="2">Info 2</option>
</select>

<div class="info" id="a-1">Information block 1</div>
<div class="info" id="a-2">Information block 2</div>
<div class="info" id="b-1">Information block 4</div>
<div class="info" id="b-2">Information block 5</div>
<div class="info" id="c-1">Information block 6</div>
<div class="info" id="c-2">Information block 7</div>

<input type="submit" value="Генерирувать">



</body>

</html>