Смена картинки в зависимости от value select

488
11 января 2017, 00:03

Ситуация такая: есть 2 селектa, в первом тип машины, во втором модель машины. Значения во втором селекте меняются в зависимости от выбора в первом селекте. При выборе во втором селекте должна меняеться картинка модели машины,но я не могу понять, как это сделать.

Вот код:

var mkLists = new Array(4)  
mkLists["empty"] = ["Выберите марку машины"];  
mkLists["passenger"] = ["Hyundai", "Toyota Camry 40", "KIA Optima"];  
mkLists["BusinessClass"] = ["Toyota Land Cruiser", "Mercedes-Benz S 350-l", "Mercedes-Benz S 500-l", "KIA Cadenza", "Ssangyong Chairman Limo"];  
mkLists["Multiplace"] = ["Mercedes Benz Tourismo", "Hyundai Aero City", "Hyundai Universe Luxury", "Hyundai Counti", "Toyota Coaster", "Toyota hiace"];  
mkLists["SpecMachinery"]= ["Газ 330232", "Газ 330202", "Камаз 45143", "Прицеп (Камаз 45143)"];  
 
function mkChange(selectObj) {  
  var id = selectObj.selectedIndex;  
  var which = selectObj.options[id].value;  
    carsList = mkLists[which];  
  var carSelect = document.getElementById("brand");  
  while (carSelect.options.length > 0) {  
    carSelect.remove(0);  
  }  
  var newOption;  
  for (var i=0; i<carsList.length; i++) {  
      newOption = document.createElement("option");  
      newOption.value = carsList[i];   
      newOption.text=carsList[i]; 
      try { 
          carSelect.add(newOption); 
      }  
      catch (e) { 
          carSelect.appendChild(newOption); 
      }  
  } //конец цикла  
} //конец функции 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
  <select id="mk" onchange="mkChange(this);"> 
    <option value="empty">Выберите тип машины</option> 
    <option value="passenger">Легковой</option> 
    <option value="BusinessClass">Бизнес класс</option> 
    <option value="Multiplace">Многоместный</option> 
    <option value="SpecMachinery">Спецтехника</option> 
  </select> 
 
  <select id="brand"> 
    <option value="0">Выберите марку машины</option> 
  </select> 
</form> 
 
<img src="">

Если какие-то неясности - спрашивайте. Заранее спасибо

Answer 1

Можно сделать таким простым образом, с использованием объекта.
P.S. в следующий раз, поменьше комбинаций пишите, я 10 минут искал картинки :)

var mkLists = new Array(4)  
mkLists["empty"] = ["Выберите марку машины"];  
mkLists["passenger"] = ["Hyundai", "Toyota Camry 40", "KIA Optima"];  
mkLists["BusinessClass"] = ["Toyota Land Cruiser", "Mercedes-Benz S 350-l", "Mercedes-Benz S 500-l", "KIA Cadenza", "Ssangyong Chairman Limo"];  
mkLists["Multiplace"] = ["Mercedes Benz Tourismo", "Hyundai Aero City", "Hyundai Universe Luxury", "Hyundai Counti", "Toyota Coaster", "Toyota hiace"];  
mkLists["SpecMachinery"]= ["Газ 330232", "Газ 330202", "Камаз 45143", "Прицеп (Камаз 45143)"];  
 
function mkChange(selectObj) {  
  var id = selectObj.selectedIndex;  
  var which = selectObj.options[id].value;  
    carsList = mkLists[which];  
  var carSelect = document.getElementById("brand");  
  while (carSelect.options.length > 0) {  
    carSelect.remove(0);  
  }  
  var newOption;  
  for (var i=0; i<carsList.length; i++) {  
      newOption = document.createElement("option");  
      newOption.value = carsList[i];   
      newOption.text=carsList[i]; 
      try { 
          carSelect.add(newOption); 
      }  
      catch (e) { 
          carSelect.appendChild(newOption); 
      }  
  } 
  checkimage($('#brand').val()); 
} 
 
$('#brand').on('input', function() { 
  checkimage(this.value); 
}); 
 
function checkimage(val) { 
  var arr = { 
    'Hyundai': 'https://i.stack.imgur.com/WZsJn.jpg?s=48&g=1',  
    'Toyota Camry 40': 'https://i.stack.imgur.com/HgiaU.gif?s=32&g=1',  
    'KIA Optima': 'https://www.gravatar.com/avatar/b2f4cbdf639291342efd2d1b65aab9a5?s=32&d=identicon&r=PG&f=1',  
    'Toyota Land Cruiser': 'https://i.stack.imgur.com/XyqB8.jpg?s=32&g=1', 
    'Mercedes-Benz S 350-l': 'http://carspravka.ru/images/auto/308364200902ee7538b0f1e820e90dd7.jpg', 
    'Mercedes-Benz S 500-l': 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQhkicI4gAw25_36ICerF5foHKolNKWo72syMnku1-heg7g8B7U', 
    'KIA Cadenza': 'http://media.caranddriver.com/images/16q1/665058/2017-kia-cadenza-photos-and-info-news-car-and-driver-photo-667111-s-450x274.jpg', 
    'Ssangyong Chairman Limo': 'https://madwhips.s3.amazonaws.com/photo_219_ssangyong_chairman_limo_1_33623_original.jpg', 
    'Mercedes Benz Tourismo': 'https://cdn.riastatic.com/photos/auto/newauto_photos/62/6200/620059/620059f.jpg', 
    'Hyundai Aero City': 'http://kortim.ru/images/stati/huindai-super-aero-sity/Hyundai_Super_Aero_City540_Euro4.jpg', 
    'Hyundai Universe Luxury': 'http://fotobus.msk.ru/photo/07/87/06/787067.jpg', 
    'Hyundai Counti': 'http://a2goos.com/data_images/galleryes/hyundai-county/hyundai-county-05.jpg', 
    'Toyota Coaster': 'https://upload.wikimedia.org/wikipedia/commons/6/6a/Toyota_Coaster_Deluxe_of_China_TV_BA-227_20100531.jpg', 
    'Toyota hiace': 'https://upload.wikimedia.org/wikipedia/commons/6/62/Toyota_Hiace_H200_511.JPG', 
    'Газ 330232': 'http://gruzovo.com/wp-content/uploads/2015/06/330232_1-350x263.jpg', 
    'Газ 330202': 'http://www.gaz-tranzit.ru/files/auto/img_2_745.jpg', 
    'Камаз 45143': 'http://westwind-covenant.com/images/59.jpg', 
    'Прицеп (Камаз 45143)': 'http://autoline.com.ua/img/s/gruzovik-gruzovik-zernovozKAMAZ-45143-012-62---4_big--12051014101772788100.jpg' 
  }; 
  if(arr[val] != undefined){ 
    $('img').attr('src', arr[val]); 
  }; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
    <select id="mk" onchange="mkChange(this);"> 
           <option value="empty">Выберите тип машины</option> 
           <option value="passenger">Легковой</option> 
           <option value="BusinessClass">Бизнес класс</option> 
           <option value="Multiplace">Многоместный</option> 
           <option value="SpecMachinery">Спецтехника</option> 
    </select> 
 
    <select id="brand"> 
           <option value="0">Выберите марку машины</option> 
    </select> 
</form> 
<img src="https://i.stack.imgur.com/WZsJn.jpg?s=48&g=1" width="250">

Answer 2

$(function() { 
	$(".model").change(function(){ //При изменении модели 
		var img_id = $(".model").children("option:selected").attr("data"); // Получаем значение атрибута блока с изображением модели автомобиля который нужно показать на изображении 
      $(".modelImg").fadeOut(1); // прячем все блоки с изображением автомобилей 
      $(img_id).fadeIn(10); // показываем нужный блок с изображением автомобиля 
	}); 
});
.modelImg { 
  display: none; 
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="model"> 
  <option>-</option> 
  <option data="#model-1">Модель 1</option><!-- в data указываем id блока с изображением нужного автомобиля  --> 
  <option data="#model-2">Модель 2</option><!-- в data указываем id блока с изображением нужного автомобиля  --> 
  </select> 
 
<div class="modelImg" id="model-1"> <!-- id идентефикатор нужного изображения выбраного в селекте  --> 
  <img  src="" alt="Модель 1" /></div> 
<div class="modelImg"  id="model-2"> 
  <img src="" alt="Модель 2" /> 
</div>

READ ALSO
Сниппет ссылки в вк [требует правки]

Сниппет ссылки в вк [требует правки]

Подскажите, как настроить сниппеты для ссылок в Вконтакте<title> заполнен, <description> тоже, а ссылки не меняются, и выглядят:

369
Как сделать баннеры разных размеров? [требует правки]

Как сделать баннеры разных размеров? [требует правки]

ЗдравствуйтеЕсли вы сейчас зайдете на catalog

279
jquery не верная передача значения в контейнер select

jquery не верная передача значения в контейнер select

При инициализании списка автоматически задаю необходимый мне елемент списка как выбранный но иногда выбирается неверныйВот в чем соль

328
Можно ли неявно получить ссылку на класс из которого был вызван конструктор другого класса?

Можно ли неявно получить ссылку на класс из которого был вызван конструктор другого класса?

Допустим, есть класс, который вызывает в методе конструктор и создает тип

329