Question

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

e.g。如果他们从第一个下拉菜单中选择“Chevrolet”，则下一个选项仅显示雪佛兰的型号。然后根据该选择，该模型的引擎大小是唯一可用的选项。如何使用JavaScript和PHP执行此操作？

Answer 1

Anywidth下拉/弹出菜单，点击操作并居中

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

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

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();
    });
});

条件下拉菜单

2 个答案:

Anywidth下拉/弹出菜单，点击操作并居中