0

我正在尝试创建一个汽车租赁表格来计算订单。

我的问题是当用户从列表框或下拉列表中选择汽车类型时，它应该与图像一起使用。

<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>
4

1 回答 1

0

您要做的是将脚本移动到 html 中的结束 body 标记之前，至少在下拉菜单的 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，这将导致元素选择问题。

于 2015-10-10T17:34:51.533 回答