<style>
/*Скрываем лишнюю кнопку*/
.t690 .t-submit {display:none; }
.t690 .t-form__inputsbox {width: 100%;}
/*Стиль блокировки списка*/
.selecblk{ opacity: 0.6; pointer-events: none;}
/*Стиль для поля Select - Вызов*/
.startselect {box-shadow: inset 11px 0px 0px 0px #2d8e88;}
/*Стиль для поля Select - Завершено*/
.endselect { box-shadow: inset 0px 6px 16px 0px #afafaf;opacity: 0.5;}
/*Стиль для поля Select - Анимация*/
.t-select {transition:all 0.5s cubic-bezier(0, 0, 0.8, 1.0);height:40px !important;}
textarea[name="deviceform"] {
color: #888888 !important;
border: 0px !important;
pointer-events: none;
box-shadow: 0px 0px 10px 4px #ececec;
background: #ffffff;
resize: none;
}
</style>
<script>
$( document ).ready(function() {
var selectbrand = [];
var selectdevice = [];
var sostav = 0;
var sostavuslug = 0;
var brandplace = 0;
var deviceplace = 0;
var serviceplace = 0;
//Заполняем модели устройств
var articles = [
/*Apple*/ ['iPhone 4','iPhone 4s','iPhone 5'],
/*Samsung*/ ['A300','A310','A320'],
/*HTC*/ ['8X','Butterfly 2 X920E','Desire 10 Lifestyle']
];//articles
var price = {
"iPhone 4": [
{"service":"Замена дисплейного модуля (оригинал)","summ":3200},
{"service":"Замена дисплейного модуля","summ":1400},
{"service":"Замена стекла или сенсора","summ":2300},
],
"iPhone 4s": [
{"service":"Замена дисплейного модуля (оригинал)","summ":3188},
{"service":"Замена дисплейного модуля","summ":1740},
{"service":"Замена стекла или сенсора","summ":2360},
],
"iPhone 5": [
{"service":"Замена дисплейного модуля (оригинал)","summ":4200},
{"service":"Замена дисплейного модуля","summ":2400},
{"service":"Замена стекла или сенсора","summ":2390},
],
"A300": [
{"service":"Замена дисплейного модуля","summ":1500},
{"service":"Замена стекла или сенсора","summ":2660},
],
"A310": [
{"service":"Замена дисплейного модуля","summ":1410},
{"service":"Замена стекла или сенсора","summ":2560},
],
"A320": [
{"service":"Замена дисплейного модуля","summ":2340},
{"service":"Замена стекла или сенсора","summ":2670},
],
"8X": [
{"service":"Замена дисплейного модуля","summ":1450},
{"service":"Замена стекла или сенсора","summ":2667},
],
"Butterfly 2 X920E": [
{"service":"Замена дисплейного модуля","summ":1332},
{"service":"Замена стекла или сенсора","summ":2980},
],
"Desire 10 Lifestyle": [
{"service":"Замена дисплейного модуля","summ":2120},
{"service":"Замена стекла или сенсора","summ":2340},
]
};//price
//Очистка полей
function cleartext(){$('.t580__title , .t580__descr').hide(400);};cleartext();
function blockbtn(){ $('.t580__btn').addClass('selecblk')};blockbtn();
//Блокируем список Девайса и Услуги
function blocklist(){
$('select[name="device"]').parent(".t-select__wrapper ").addClass("selecblk");
$('select[name="problem"]').parent(".t-select__wrapper ").addClass("selecblk");
};blocklist();
//Задаем списку моделей авто нужный цвет
$('select[name="brand"]').addClass("startselect");
//Функция вывода девайсов
function showdevice(){sostav = selectbrand.length;
//Добавляем поле девайс первую строку
$('select[name="device"]').append($('<option value="stop">*** выберите модель ***</option>'));
for (var i = 0; i < sostav ; i++) {
$('select[name="device"]').append($('<option value="'+selectbrand[i]+'">'+selectbrand[i]+'</option>'));
};};
//Функция вывода услуг
function showservice(){sostavuslug = price[selectdevice].length;
//Добавляем поле услуга первую строку
$('select[name="problem"]').append($('<option value="stop">*** выберите тип услуги ***</option>'));
for (var i = 0; i < sostavuslug ; i++) {
$('select[name="problem"]').append($('<option value="'+price[selectdevice][i]["service"]+'">'+price[selectdevice][i]["service"]+'</option>'));
};};
//Когда изменяют брэнд
$('select[name="brand"]').change(function() {blocklist();blockbtn();
//Очищаем список девайсов
$('select[name="device"]').empty();cleartext();
//Активируем первый пункт услуг
$("select[name='problem'] option:first").prop('selected', true);
// Получаем номер элемента в списке моделей
brandplace = $(this)[0].selectedIndex;
//Если это позиция 0, то
if (brandplace == 0) {
//Прописываем первый пункт в списке
$('select[name="device"]').append($('<option value="stop">*** выберите модель ***</option>'));
//Задаем спискам стили цветовые
$('select[name="brand"]').removeClass("endselect").addClass("startselect");
$('select[name="device"]').removeClass("startselect");
$('select[name="problem"]').removeClass("startselect");
}else{//Если не 0-ая позиция, то
//Разблокируем список моделей
$('select[name="device"]').parent(".t-select__wrapper ").removeClass("selecblk");
//Задаем спискам стили цветовые
$('select[name="brand"]').removeClass("startselect").addClass("endselect");
$('select[name="device"]').removeClass("endselect").addClass("startselect");
$('select[name="problem"]').removeClass("startselect");
selectbrand = articles[brandplace-1]; showdevice();};});
//Когда изменяют девайс
$('select[name="device"]').change(function() { blockbtn();
$('select[name="problem"]').empty();cleartext();
//Активируем первый пункт поля проблем
$("select[name='problem'] option:first").prop('selected', true);
deviceplace = $(this)[0].selectedIndex;
if (deviceplace == 0){//Если выбран элемент номер 0, то
//Добавляем поле услуга первую строку
$('select[name="problem"]').append($('<option value="stop">*** выберите тип услуги ***</option>'));
//Блокируем поле проблем
$('select[name="problem"]').parent(".t-select__wrapper ").addClass("selecblk");
//Задаем спискам стили цветовые
$('select[name="device"]').removeClass("endselect").addClass("startselect");
$('select[name="problem"]').removeClass("startselect");
}else{//Разблокируем поле проблем
$('select[name="problem"]').parent(".t-select__wrapper ").removeClass("selecblk");
//Задаем спискам стили цветовые
$('select[name="device"]').removeClass("startselect").addClass("endselect");;
$('select[name="problem"]').addClass("startselect");
selectdevice = selectbrand[deviceplace-1] ;
showservice(); }; });
//Когда изменяют услугу
$('select[name="problem"]').change(function() {
serviceplace = $(this)[0].selectedIndex;
if (serviceplace == 0){//Если выбран элемент номер 0, то
$('.t580__title , .t580__descr').hide(400);blockbtn();
}else{ $('.t580__btn').removeClass('selecblk')
$('.t580__title').html($('select[name="brand"]').val()+' '+$('select[name="device"]').val());
$('.t580__descr').html($('select[name="problem"]').val()+' = '+price[selectdevice][serviceplace-1]["summ"]+' руб.' );
$('.t580__title , .t580__descr').show(400);
var deviceformtxt = $('.t580__title').text()+'\n'+$('.t580__descr').text();
$('textarea[name="deviceform"]').val(deviceformtxt);
};
});
})
</script>