在下拉菜单中选择一个选项，确定第二个下拉菜单中可用的列表答案

【问题标题】：Selecting an option in drop down menu one determines list available in the second drop down menu在下拉菜单中选择一个选项，确定第二个下拉菜单中可用的列表
【发布时间】：2014-05-09 23:54:19
【问题描述】：

我想让第二个下拉菜单的包含取决于第一个下拉菜单中选择的内容。就我而言，希望为汽车选择选项做这件事。 i.e when the car make is selected this then populates the model drop down menu with the relevant models.

由于汽车有很多品牌，我想尽可能保持简洁，我认为每个品牌的模型数组是解决方案，但如何实现这一点。我已经查看了各种解决方案，但找不到合适的答案，任何建议/示例将不胜感激。

我正在使用 jsp。

Make:<select>
    <option value="audi">Audi</option>
    <option value="bmw">BMW</option>
    <option value="ford">Ford</option>
    <option value="toyota">Toyota</option>
</select>

【问题讨论】：

您可以隐藏 div，其中包含每个品牌的相应汽车型号，根据所选品牌出现或消失，或者您可以进行 ajax 调用以从其他地方检索它们？
如果它是一种整洁的方式，您是否有一个示例或链接到一个很好的ajax调用方法示例。我有一个用于用户配置文件功能的数据库，我还可以创建一个品牌和型号表吗？

标签： html jsp drop-down-menu

【解决方案1】：

你可以用一些简单的 JS 和 css 来完成（这里是一个 JSFiddle：http://jsfiddle.net/N7Q57/1/）

Make:
<select name="cars" id="cars">
    <option selected value="Choose">Choose</option>
    <option value="Audi">Audi</option>
    <option value="BMW">BMW</option>
    <option value="Ford">Ford</option>
    <option value="Toyota">Toyota</option>
</select>       

<div id="brands">
<select class="audi">
    <option value="1">1</option>
    <option value="2">2</option>            
</select>
<select class="bmw">
   <option value="3">3</option>
   <option value="4">4</option>            
</select>
</div

jQuery

$("#cars").change(function () {
    var string = "";
    string =  $("select#cars option:selected").text();
    if (string == "Audi"){
        $("#brands .bmw").hide();
        $("#brands .audi").show();
        $("#brands").show();
    } else if (string == "BMW"){
        $("#brands .audi").hide();
        $("#brands .bmw").show();
        $("#brands").show();
    }

})

和 CSS：

#brands{
    display: none;
}

【讨论】：