通過使用下拉菜單如何顯示/隱藏圖像

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> 

確保ID的是唯一的。在這種情況下，第二個和第三個元素共享相同的id，這將導致元素選擇問題。