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

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

1 个答案: