Javascript 将列表选择拆分为div以在选择时显示

我有从数据库中选择项目的代码，当选择时，会在另一个列表框中显示相应的项目，但我希望在从第一个列表框中选择项目时，第一个列表框会初始显示，然后在不同的div中显示第二个列表框。因此，当选择“选择车辆类型”时，我要显示的是“选择车辆”后面的一个。有问题分开他们，因为它是这样的任何帮助将是伟大的

代码是：

    <div style="margin-bottom: 15px" class="input-group">
 Select type of vehicle : <select name=category id=category>
<option value='' selected>Please select</option>
<?Php
require "config.php";// connection to database 
$sql="select * from category "; // Query to collect data 

foreach ($dbo->query($sql) as $row) {
echo "<option name=vehicle_type value=$row[cat_id]>$row[category]</option>";
}
?>
</div>

<div style="margin-bottom: 15px" class="input-group">
<span class="input-group-addon"><br></span></div>

<div><div style="margin-bottom: 15px" class="input-group">
</select>
Select vehicle : <select name=vehicle_id id=sub-category></select>

</div>
    </div>

选择车辆类型：
请选择


选择车辆：

您可以试试这个。我将第一个select的结束标记移出了另一个select的div，添加了classhide和idselect vehicle

HTML:

jQuery：

$( "#category" ).change(function() {
    if ($(this).find("option:selected").attr('value') == ''){
        // User removed type of vehicle. Hide the vehicle selection
        $( "#select-vehicle" ).addClass( "hide" );
    } else {
        // User chose type vehicle. Show the vehicle selection
        $( "#select-vehicle" ).removeClass( "hide" );
    }
});

---

编辑：

您的代码不清楚。你能再检查一遍吗（我想你在开始和结束阶段有一些问题）？请把它缩进，这样看起来更清楚！嗨，很好，谢谢，但是如果他们取消选择一个项目，你怎么隐藏div呢？@Jules好极了！我已经编辑了上面的帖子，如果他们取消选择，我会重新隐藏它。

.hide {
    display: none;
}

$( "#category" ).change(function() {
    if ($(this).find("option:selected").attr('value') == ''){
        // User removed type of vehicle. Hide the vehicle selection
        $( "#select-vehicle" ).addClass( "hide" );
    } else {
        // User chose type vehicle. Show the vehicle selection
        $( "#select-vehicle" ).removeClass( "hide" );
    }
});