APPLE
Ремонт и обслуживание iPhone
Выберите модель и вид услуги
<style>
 /*Стиль блокировки списка*/
 .selecblk{ opacity: 0.6; pointer-events: none;}
 .t-input-group_tx .t-text {
    font-size: 18px;
    font-weight: 600;
    color: #8c2525;
 }
</style>

<script>
$( document ).ready(function() {
var selectdevice = [];
var sostavuslug = 0;
var deviceplace = 0;
var serviceplace = 0;


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},
  ],
  
 
};//price

//Очистка полей
function cleartext(){$('.t-input-group_tx').hide();};cleartext();

//Блокируем список и Услуги
function blocklist(){
    
      $('select[name="problem"]').parent(".t-select__wrapper ").addClass("selecblk");
};blocklist();
//Задаем списку моделей нужный цвет
 $('select[name="device"]').addClass("startselect");

//Функция вывода услуг
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="device"]').change(function() {  
   $('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 = $('select[name="device"]').val(); showservice(); }; });

//Когда изменяют услугу
 $('select[name="problem"]').change(function() {  
    serviceplace = $(this)[0].selectedIndex;
     if (serviceplace == 0){//Если выбран элемент номер 0, то 
     $('.t-input-group_tx').fadeOut(400);
     }else{
      $('.t-input-group_tx .t-text').html( $('select[name="device"]').val()+'<br>'+$('select[name="problem"]').val()+' = '+price[selectdevice][serviceplace-1]["summ"]+' руб.' );
      $('.t-input-group_tx').fadeIn(400);
     };
 });
})
</script>
Made on
Tilda