Вопрос в работе js, селектор и смена картинки - Форум об интернет-маркетинге
Этот сайт существует на доходы от рекламы.
Пожалуйста, выключите AdBlock.
Вернуться   Форум об интернет-маркетинге > >
Ответ
 
Опции темы
Старый 17.07.2017, 20:30   #1
Дипломник
 
Регистрация: 17.01.2014
Сообщений: 86
Репутация: -557

По умолчанию Вопрос в работе js, селектор и смена картинки

Доброе время суток, подскажите мне. В js практически ноль.

есть следующий код, что подправить, чтобы остался только основной селектор и при смене контента селекта, картинка так же продолжала меняться.

PHP код:
<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">

<script type="text/javascript">
var mkLists = new Array(4) 
mkLists***91;"empty"***93; = ***91;"Выберите марку машины"***93;; 
mkLists***91;"passenger"***93; = ***91;"Hyundai", "Toyota Camry 40", "KIA Optima"***93;; 
mkLists***91;"BusinessClass"***93; = ***91;"Toyota Land Cruiser", "Mercedes-Benz S 350-l", "Mercedes-Benz S 500-l", "KIA Cadenza", "Ssangyong Chairman Limo"***93;; 
mkLists***91;"Multiplace"***93; = ***91;"Mercedes Benz Tourismo", "Hyundai Aero City", "Hyundai Universe Luxury", "Hyundai Counti", "Toyota Coaster", "Toyota hiace"***93;; 
mkLists***91;"SpecMachinery"***93;= ***91;"Газ 330232", "Газ 330202", "Камаз 45143", "Прицеп (Камаз 45143)"***93;; 

function mkChange(selectObj) { 
  var id = selectObj.selectedIndex; 
  var which = selectObj.options***91;id***93;.value; 
    carsList = mkLists***91;which***93;; 
  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***91;i***93;;  
      newOption.text=carsList***91;i***93;;
      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***91;val***93; != undefined){
    $('img').attr('src', arr***91;val***93;);
  };
}
</script> 
https://www.w3schools.com/code/tryit...e=FHNEBFHVSFMN
LipGrad вне форума   Ответить с цитированием

Реклама
Старый 17.07.2017, 22:58   #2
Sitealert
Слесарь-сайтосборщик
 
Регистрация: 30.09.2016
Адрес: Замкадье
Сообщений: 1,798
Репутация: 172720

По умолчанию Re: Вопрос в работе js, селектор и смена картинки

Цитата:
Сообщение от LipGrad Посмотреть сообщение
var mkLists = new Array(4)
Ужосс какой-то... А так ради интереса, что Вы имеете в виду, когда пишете "основной селектор"?
__________________
Отпилю лишнее, прикручу нужное, выправлю кривое.
Вытравлю вредителей.
Sitealert вне форума   Ответить с цитированием
Ответ




Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход



Текущее время: 16:27. Часовой пояс GMT +3.

Регистрация Справка Календарь Поддержка Все разделы прочитаны