HTML表单第一个下拉菜单自动更改第二个下拉菜单选项

我在第一个下拉列表中有以下代码：

<td align="left" style="padding-bottom:10px">
    <select name="category" id="category">
        <option selected value="Please Select">Please Select</option>           
        <option value="Cars">Cars</option>
        <option value="Trucks">Trucks</option>
        <option value="Motorcycles">Motorcycles</option>
        <option value="Boats">Boats</option>
    </select>
</td>

请选择
汽车
卡车
摩托车
船

我还有第二个类别，上面的选项有不同的颜色。 例如： 如果我选择Cars，则第二个下拉菜单将显示为选择“红色”、“绿色”或“蓝色”，但如果我选择Trucks，则第二个下拉菜单将显示为仅选择“黑色”或“白色”选项

这两个第二个下拉选项将转到mySQL DB中的同一列（子类别），因此没有汽车可以在子类别列上具有值“黑色”，也没有卡车可以在子类别列上具有值“红色”

谢谢

工作示例：

鉴于这种结构：

     <select name="category" id="category">
    <option selected value="Please Select">Please Select</option>           
    <option value="Cars">Cars</option>
    <option value="Trucks">Trucks</option>
    <option value="Motorcycles">Motorcycles</option>
    <option value="Boats">Boats</option>
</select>

<div>
<select name="category2" id="truck" class="second">
        <option value="white">white</option>
        <option value="black">black</option>            
</select>

<select name="category2" id="car" class="second">
        <option value="red">red</option>
        <option value="green">green</option>
        <option value="blue">blue</option>           
</select>
</div>

CSS

#category2{
display: none;
}

---

听起来您需要一个Ajax类型的解决方案。将其绑定到第一个控件上的“更改选择”事件。使用结果查询第二个（及后续）控件的可用值。如果没有更多信息，将很难提供帮助。后端语言是什么？PHP？你试过什么？您使用jquery吗？等等…后端语言是php。我不使用jQuery，因为直到现在我还不需要它。它如何适应选择汽车。。然后卡车？我转到js fiddle，当选择一个选项时，弹出窗口显示带有所选选项的消息，我得到了它。但是我不知道如何为每个选项编写新的下拉列表。你能不能给我提供一个新的下拉列表的代码，以生成不同的结果，或者给我演示如何抛出一些指南或什么？游戏中的新功能，sorrySelect卡车-它会工作的。您可以更改它，使其也适用于其他值。@ethrbunny如果用户选择“Trucks”，此示例将加载一组新的选择选项。OP可以将其更改为他拥有的许多其他项目。这向他展示了怎么做。女士，这看起来和工作起来都像个符咒；）但借此机会，如果我希望出现第二个下拉列表，而不是像现在这样被替换，该怎么办？从来没有想过“替换”而不是“添加”一个新的液滴列表，但现在我正在重新考虑使用什么。但如果我能同时做到这两件事，然后做出决定，那就太好了。再次感谢你！！！

#category2{
display: none;
}