javascript - ドロップダウンを使用して画像を表示/非表示にする方法

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>