Change the image depending on the value select [closed]

Question

The situation is this: there are 2 selekta, in the first type of machine, in the second model of the machine. The values in the second select change depending on the selection in the first select. When choosing in the second selection, the picture of the car model should change, but I cannot figure out how to do it.

Here is the code:

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="">

If any ambiguities - ask. Thank you in advance

It is not clear what your problem is and how to reproduce it without description and code.
@Aiba probably should have clarified: the code should be in the question itself.
I can't do it so that when choosing in the second selection with the models, the pictures change depending on the chosen model

Accepted Answer · 2017-01-09T09:08:03

You can do it in such a simple way using an object.
PS next time, write less combinations, I looked for pictures for 10 minutes :)

 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">

What about storing the value (or data-value ) directly as a link to the image?
The initial value of src , in an amicable way, should be tied to the original selected <option> using a code.

Dmitriy Kondratiuk Dmitriy Kondratiuk 1,847 five eleven · Answer 2 · 2017-01-09T09:13:54

 $(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>

fadeOut(1) , in principle, will work (visually) as hide() .

Change the image depending on the value select [closed]

Closed due to the fact that off-topic participants Vadim Ovchinnikov , Alexey Shimansky , user194374, Regent , aleksandr barakin 10 Jan '17 at 23:29 .

2 answers 2

More articles: