Показать сообщение отдельно
  #4 (permalink)  
Старый 18.04.2018, 16:12
Профессор
Отправить личное сообщение для the_little Посмотреть профиль Найти все сообщения от the_little
 
Регистрация: 25.09.2017
Сообщений: 186

#rem-calc .calc-section .slct { display: block; border-radius: 5px; border: 1px solid #cecece; background-color: #F6F6f6; width: 285px; padding: 4px 15px 4px 10px; color: #444; background-position: 290px -145px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; }
#rem-calc .calc-section .slct.active { border-radius: 5px 5px 0 0; border-bottom: none; }
#rem-calc .calc-section .drop { margin: 0; padding: 0; width: 310px; border: 1px solid #cecece; border-top: none; display: none; position: absolute; background: #fff; }
#rem-calc .calc-section .drop li { list-style: none; border-top: 1px dotted #e8e8e8; cursor: pointer; display: block; color: #444; padding: 4px 15px 4px 25px; background-position: 10px -119px; }
#rem-calc .calc-section .drop li:hover { background-color: #e8e8e8; color: #222; }


<div id="rem-calc">
  <form>
<div class="calc-section">
      <div class="calc-h2-title">Базовые работы</div>
      <div class="select">
      	<a href="javascript:void(0);" class="slct">Стиль</a>
      	<ul class="drop">
      		<li><a href="javascript:void(0);" class="start-calc">Стиль 1</a></li>
      		<li><a href="javascript:void(0);" class="start-calc">Стиль 2</a></li>
      		<li><a href="javascript:void(0);" class="start-calc">Стиль 3</a></li>
      	</ul>
      	<input type="text" id="base-style" />
      </div>
</div>
  </form>
</div>


// Select
$('.slct').click(function(){
	/* Заносим выпадающий список в переменную */
	var dropBlock = $(this).parent().find('.drop');
	/* Делаем проверку: Если выпадающий блок скрыт то делаем его видимым*/
	if( dropBlock.is(':hidden') ) {
		dropBlock.slideDown();
		/* Выделяем ссылку открывающую select */
		$(this).addClass('active');
		/* Работаем с событием клика по элементам выпадающего списка */
		$('.drop').find('li').click(function(){
			/* Заносим в переменную HTML код элемента
			списка по которому кликнули */
			var selectResult = $(this).text();
			/* Находим наш скрытый инпут и передаем в него
			значение из переменной selectResult */
			$(this).parent().parent().find('input').val(selectResult);
			/* Передаем значение переменной selectResult в ссылку которая
			открывает наш выпадающий список и удаляем активность */
			$(this).parent().parent().find('.slct').removeClass('active').html(selectResult);
			/* Скрываем выпадающий блок */
			dropBlock.slideUp();
		});
	/* Продолжаем проверку: Если выпадающий блок не скрыт то скрываем его */
	} else {
		$(this).removeClass('active');
		dropBlock.slideUp();
	}
	/* Предотвращаем обычное поведение ссылки при клике */
	return false;
});

$(document).ready(function() {

	var getData=new Promise(function(resolve){
		Papa.parse("/price.csv", {
			download: true,
			header: false,
			complete: function(results) {
				resolve(results.data);
			}
		});
	});

	getData.then(function(data){

		// СТОИМОСТЬ РАБОТ
		var as 			= data[0][2];			// Студия - 18 000 р\м2
		var a1 			= data[1][2];			// 1 комн. кв - 16 000 р.\м2
		var a2 			= data[2][2];			// 2 комн. кв - 14 000 р.\м2
		var a3 			= data[3][2];			// 3 и более - 13 000 руб.\м2
		var c_price = data[4][2];			// СУ 140000р

		function changeFunc() {
			// Базовые работы (списки)
			var style = $('#base-style').val();
			console.log(style);
		};

		$('#rooms-amount, #apartment-square, #sanuzel-amount, #dop-akcentwall-amount, #dop-arka-amount, #dop-radiator-amount, #dop-karniz-amount, #dop-kafel-amount, #dop-roomlight-amount, #base-style, #base-potolok, #base-color, base-floor').change(function() {
			changeFunc();
		});

		$('.start-calc').click(function() {
			changeFunc();
		});

	});
});
Ответить с цитированием