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

【问题标题】：By Using Dropdown how to Show/Hide the images通过使用下拉菜单如何显示/隐藏图像
【发布时间】：2015-10-10 17:15:36
【问题描述】：

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

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

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

【问题讨论】：

欢迎来到 stackoveflow :)

标签： javascript html parental-control

【解决方案1】：

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

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

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

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

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

<form width="900px" height="900>

高度之后需要有一个结束引号。我建议使用具有 JS 功能的漂亮文本编辑器来为您检查。

<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 是唯一的。在这种情况下，第 2 和第 3 个元素共享相同的 id，这将导致元素选择问题。

【讨论】：