JSFiddle - React, Tailwind, and code Playground

by Zero Fx

HTML

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
	<body>
		<div class="wr">
			<div class="container">
				<div class="row">
					<div class="col-md-4">
						<select id='age' name="age">
							<option value="">--Возраст--</option>
							<option value="5">5</option>
							<option value="6">6</option>
							<option value="7">7</option>
						</select>
					</div>
					<div class="col-md-4">
						<select id='size' name="size">
							<option value="">--Количество--</option>
							<option value="10">10</option>
							<option value="100">100</option>
							<option value="500">500</option>
						</select>
					</div>
					<div class="col-md-4">
						<select id='parts' name="parts">
							<option value="">--Состав--</option>
							<option value="wit">С елементами</option>
							<option value="without">Без елементов</option>
						</select>
					</div>
				</div>
			</div>

			<div class="container">
				<div class="row">
					<div class="col-lg-4 atr" data-element='["5","100","without"]'>
						<ul>
							<li><h4>Возраст:</h4> <b>5 лет</b></li>
							<li><h4>Количество:</h4> <b>100 шт.</b></li>
							<li><h4>Состав:</h4> <b>Без елементов</b></li>
						</ul>
					</div>
					<div class="col-lg-4 atr" data-element='["6","10s00","without"]'>
						<ul>
							<li><h4>Возраст:</h4> <b>6 лет</b></li>
							<li><h4>Количество:</h4> <b>1000 шт.</b></li>
							<li><h4>Состав:</h4> <b>Без елементов</b></li>
						</ul>
					</div>
					<div class="col-lg-4 atr" data-element='["7","10","wit"]'>
						<ul>
							<li><h4>Возраст:</h4> <b>7 лет</b></li>
							<li><h4>Количество:</h4> <b>10 шт.</b></li>
							<li><h4>Состав:</h4> <b>С елементами</b></li>
						</ul>
					</div>
					<div class="col-lg-4 atr" data-element='["6","1000","wit"]'>
						<ul>
							<li><h4>Возраст:</h4> <b>6 лет</b></li>
							<li><h4>Количество:</h4> <b>1000...

CSS

* {padding: 0;margin: 0;}
body {background-color: #cecece;}
.wr {width: 1200px;margin: 0 auto; background-color: #d9534f;}
.col-md-4 {text-align: center;height: 50px;border: 2px solid red; background-color: pink;margin: 20px 0;}
.col-md-4 select {margin: 14px auto 0;}
.col-lg-4 {text-align: center;height: 200px;border: 2px solid red; background-color: pink;margin: 20px 0 5px;}
.col-lg-4 ul {
  position: relative;
  overflow: hidden;
  margin: 50px auto 0;
  text-align: center;
}
.col-lg-4 li {list-style-type: none;float: left;clear: both;}
.col-lg-4 li h4 {float: left;margin: 0 20px 0 0;}
.col-lg-4 li b {text-decoration: underline; color: red;}
.success {border: 2px dotted green !important;}

JavaScript

$(document).ready(function() {
  // alert('text!');

  var select = $(this);
  var element = $(this).data('element');
  console.log(element);

  $('select').change(function(event) {
    var sel_age = $('#age option:selected').val();
    var sel_size = $('#size option:selected').val();
    var sel_parts = $('#parts option:selected').val();
    var sel_data = sel_age+','+sel_size+','+sel_parts;
    console.log(sel_data);
  });

  function get_atr() {
    var atrDiv = $('.atr'), attrArr = [];
    atrDiv.each(function(i, el){
      attrArr[i]=  $(el).data('element');
    });
    console.log(attrArr);
  }
  get_atr();

});