Question

我有一个选择菜单，该菜单应该打开设置为显示的其他选择菜单：默认情况下没有。 jQuery应该显示选定的菜单。我尝试了很多在网上找到的不同代码，但没有一个可以做任何事情。我在做什么错了？

<!DOCTYPE HTML>  
<html lang='en'>
<head>
<style>
body{
background-image: url("https://evercharge.net/blog/content/images/2016/06/Dark-Lighting-in-Parking-Garage.jpg");
background-size: cover;
}
.myDiv{
display: none;
}
<!-- #p_vehicle_type,#p_SUV,#p_luxury,#p_compact,#p_midsize,#p_parking,#hdr{
color:white;-->
}
</style>
<meta charset = "UTF-8">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<title></title>
</head>
<body>

<center><br><h1 id="hdr">Parking Options</h1><br><br><br>
<!-- form for the vehicle type -->



<p id="p_vehicle_type">Select your vehicle type: </p><select name="vehicle_type" id="vehicle_type"> 

<option >Select Vehicle Type</option>
<option value="suv">SUV</option>
<option value="luxury">Luxury</option>
<option value="compact">Compact</option>
<option value="mid-size">Mid-Size</option>
</select><br>

<!-- SUVs, hidden by default, displayed when SUV selected -->

<div class="myDiv">
<p id="p_SUV">Select your SUV: </p><select id="SUVs">

<option value="rangerover">Range Rover</option>
<option value="tahoe">Chevrolet Tahoe</option>
</select>

<!-- Luxuries hidden by default, displayed when SUV selected -->
<p id="p_luxury">Select your car: </p><select id="Luxuries">

<option value="audi">Audi A6</option>
<option value="bmw">BMW 745i</option>
</select>

<!-- Compact hidden by default, displayed when SUV selected -->
<p id="p_compact">Select your car: </p><select id="Compacts">

<option value="civic">Honda Civic</option>
<option value="volkswagen">Volkswagen GTI</option>
</select>

<!-- Mid-size hidden by default, displayed when SUV selected -->
<p id="p_midsize" >Select your car: </p><select id="Midsize">

<option value="accord">Honda Accord</option>
<option value="camry">Toyota Camry</option>
</select>
</div>

<p id="p_parking">Choose your parking location: </p><select id="Parking">
<option value="firstdeck">First Deck</option>
<option value="seconddeck">Second Deck</option>
<option value="thirddeck">Third Deck</option>
<option value="VIP">VIP</option></center>

<script>

$(document).ready(function() {

    $('#vehicle_type').change(function(){
        if($('#vehicle_type').val() == 'suv') {
            $('#p_suv').show();
            $('#SUVs').show(); 
        } else {
            $('#row_dim').hide(); 
        } 
    });
});



</script>

</body>
</html>

无论我选择什么选项，都不会发生。例如，当我选择“ SUV”时，应该打开另一个选择菜单，显示要选择的汽车。

Answer 1

        $(document).ready(function () {
            $('#vehicle_type').change(function () {
                if ($('#vehicle_type').val() == 'suv') {
                    $('#p_SUV').show();
                } else {
                    $('#row_dim').hide();
                }
            });
        });

   body{
background-image: url("https://evercharge.net/blog/content/images/2016/06/Dark-Lighting-in-Parking-Garage.jpg");
background-size: cover;
}
        .myDiv {
            display: block;
        }

        #p_vehicle_type, #p_SUV, #p_luxury, #p_compact, #p_midsize, #p_parking, #hdr {
            color: white;
        }

        #p_SUV, #p_luxury,#p_compact,#p_midsize, #p_parking {
            display: none;
        }

<!DOCTYPE HTML>
<html lang='en'>
<head>
 
    <meta charset="UTF-8">
   
    <title></title>
</head>
<body style="text-align:center;">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <p id="p_vehicle_type">Select your vehicle type: </p>
    <select name="vehicle_type" id="vehicle_type">
        <option value="">Select Vehicle Type</option>
        <option value="suv">SUV</option>
        <option value="luxury">Luxury</option>
        <option value="compact">Compact</option>
        <option value="mid-size">Mid-Size</option>
    </select><br>
    <div id="p_SUV">
        <p id="">Select your SUV: </p>
        <select id="SUVs">
            <option value="rangerover">Range Rover</option>
            <option value="tahoe">Chevrolet Tahoe</option>
        </select>
    </div>
    <div id="p_luxury">
        <!-- Luxuries hidden by default, displayed when SUV selected -->
        <p>Select your car: </p>
        <select id="Luxuries">
            <option value="audi">Audi A6</option>
            <option value="bmw">BMW 745i</option>
        </select>
    </div>
    <div id="p_compact">
        <p>Select your car: </p>
        <select id="Compacts">
            <option value="civic">Honda Civic</option>
            <option value="volkswagen">Volkswagen GTI</option>
        </select>
    </div>

    <div id="p_midsize">
        <p>Select your car: </p>
        <select id="Midsize">
            <option value="accord">Honda Accord</option>
            <option value="camry">Toyota Camry</option>
        </select>
    </div>

    <div id="p_parking">
        <p>Choose your parking location: </p>
        <select id="Parking">
            <option value="firstdeck">First Deck</option>
            <option value="seconddeck">Second Deck</option>
            <option value="thirddeck">Third Deck</option>
            <option value="VIP">VIP</option>
        </select>
    </div>
  

</body>
</html>

使用此代码代替您的代码。在标记和命名元素方面存在一些错误

为什么我的jquery代码没有显示我选择了什么选项？

1 个答案: