#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();
});
});
});