通过使用下拉菜单如何显示/隐藏图像

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，这将导致元素选择问题。