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

Posted 2023-03-11

【中文标题】通过使用下拉菜单如何显示/隐藏图像

【英文标题】：By Using Dropdown how to Show/Hide the images

【发布时间】：2015-10-10 17:15:36

【问题描述】：

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

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

<form  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"   /></div>
        <div id="mid" class="drop-down-show-hide"><img src="img/Midsize.png"   /></div>
        <div id="mid" class="drop-down-show-hide"><img src="img/luxury.png"   /></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> 

【问题讨论】：

欢迎来到 stackoveflow :)

【参考方案1】：

您要做的是将脚本移动到 html 中的结束 body 标记之前，至少在下拉菜单的 HTML 之后。

现在发生的情况是脚本在下拉菜单被添加到 DOM 之前执行。因此，您的活动

$('#dropDown').change(function () 

并且您绑定的任何元素都不存在。

另外，您想在代码中更改两个小错误：

1.

<form  comp" class="drop-down-show-hide"><img src="img/economy.png"   /></div>
<div id="mid" class="drop-down-show-hide"><img src="img/Midsize.png"   /></div>
<div id="mid" class="drop-down-show-hide"><img src="img/luxury.png"   /></div>

确保 id 是唯一的。在这种情况下，第 2 和第 3 个元素共享相同的 id，这将导致元素选择问题。