Используя Dropdown как показать/скрыть изображения

Question

Я пытаюсь создать форму аренды автомобиля, чтобы рассчитать лист заказа.

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

<form width="900px" height="900> 
     <center><h1><span class="alternate-font">Rent a Car</span></h1></center> 
    <div> 
     <script type="text/javascript"> 
      $('.drop-down-show-hide').hide(); 

      $('#dropDown').change(function() { 
       $('.drop-down-show-hide').hide() 
       $('#' + this.value).show(); 

      }); 
     </script> 
     <select id="dropDown"> 
      <option>Choose a Car</option> 
      <option value="comp">Compact Car - $29.99</option> 
      <option value="mid">Midsize Car - $39.99</option> 
      <option value="lux">Luxury Car - $49.99</option> 
     </select> 
     <div id="comp" class="drop-down-show-hide"><img src="img/economy.png" alt="" width="300px" height="200px"/></div> 
     <div id="mid" class="drop-down-show-hide"><img src="img/Midsize.png" alt="" width="300px" height="150px"/></div> 
     <div id="mid" class="drop-down-show-hide"><img src="img/luxury.png" alt="" width="300px" height="150px"/></div> 
     <br> 
     <select name="cars"> 
      <option>Select Your City</option> 
      <option value="sfo">San Francisco</option> 
      <option value="la">Los Angeles</option> 
      <option value="lux">Luxury</option> 
     </select> 
</form> 

Answer 1

То, что вы хотите сделать, это переместить скрипт прямо перед окончанием тела тега в вашем HTML, и, по крайней мере, после HTML вашего выпадающего меню.

Что происходит сейчас, так это то, что сценарий выполняется до того, как выпадающее меню даже добавлено в DOM. Таким образом, ваше мероприятие

$('#dropDown').change(function() { 

и любой элемент, который вы связываете, не существует.

Кроме того, две незначительные ошибки, которые вы хотите изменить в коде:

1.

<form width="900px" height="900> 

Там должно быть закрытие котировка после высоты. Я предлагаю использовать хороший текстовый редактор с возможностями JS, чтобы проверить это для вас.

2.

<div id="comp" class="drop-down-show-hide"><img src="img/economy.png" alt="" width="300px" height="200px"/></div> 
<div id="mid" class="drop-down-show-hide"><img src="img/Midsize.png" alt="" width="300px" height="150px"/></div> 
<div id="mid" class="drop-down-show-hide"><img src="img/luxury.png" alt="" width="300px" height="150px"/></div> 

Убедитесь, что идентификаторы уникальны. В этом случае второй и третий элементы имеют один и тот же идентификатор, что вызовет проблемы с выбором элементов.