条件下拉菜单[关闭]

Question

我想创建一个表单，其中的选项会根据选择而改变。

例如如果他们从第一个下拉菜单中选择“雪佛兰”，那么下一个选项将只显示雪佛兰​​的型号。然后基于该选择，该型号的发动机尺寸是唯一可用的选项。如何使用 JavaScript 和 PHP 做到这一点？

Answer 1

任何宽度的下拉/弹出菜单，带有点击操作并居中

他是一个 jsfiddle 可以完成你正在寻找的东西：

点击度假村或信息，您会看到其他弹出窗口。

jsfiddle.net/supplement/UYBDm/

将 jsfiddle 复制并粘贴到浏览器中。

Answer 2

在您的 HTML 中，一定要包含 jQuery。我假设您将使用以下更详细的版本：

<label>Make</label>
<select id="makes">
</select>
<br/>
<label>Model</label>
<select id="models">
</select>

对于 JavaScript，这是一种方法。您显然希望根据您的要求以及您选择表达品牌/型号数据的方式对其进行大幅改进。

$(document).ready(function(){
    // If this list is to come from a database
    // or some other dynamic source, use PHP to
    // populate it here.
    // Feel free to format this some other way.
    // Just change the jQuery parts accordingly.
    var cars = [{"make": "Chevrolet", "models": ["Camaro", "Impala", "Volt"]}, {"make": "Honda", "models": ["Accord", "Civic", "CRV"]}];

    for (var i=0; i < cars.length; i++){
      var make = cars[i].make;        
      // Make this different if needed
      var makeval = make;
      $("#makes").append(new Option(makeval, make));
    }

    var buildModels = function(){
        // Clear current list
        $("#models option").remove();

        var selectedMake = $("#makes :selected").val();
        for (var i=0; i < cars.length; i++){
            if(selectedMake == cars[i].make){
                var models = cars[i].models;
                for (var j=0; j < models.length; j++){
                      var model = models[j];        
                      var modelval = model;
                      $("#models").append(new Option(modelval, model));
                }
                break;
            }
        }
    };

    $("#makes option").find(':first').attr('selected','selected');
    buildModels();

    $("#makes").change(function(){
        buildModels();
    });
});