我想创建一个表单,其中选项根据选择而变化。
例如,如果他们从第一个下拉菜单中选择“雪佛兰” ,那么下一个选项将只显示雪佛兰的型号。然后基于该选择,该型号的发动机尺寸是唯一可用的选项。如何使用 JavaScript 和 PHP 做到这一点?
我想创建一个表单,其中选项根据选择而变化。
例如,如果他们从第一个下拉菜单中选择“雪佛兰” ,那么下一个选项将只显示雪佛兰的型号。然后基于该选择,该型号的发动机尺寸是唯一可用的选项。如何使用 JavaScript 和 PHP 做到这一点?
他是一个可以完成您正在寻找的东西的jsfiddle:
单击度假村或信息,您将看到其他弹出窗口。
jsfiddle.net/supplement/UYBDm/
将 jsfiddle 复制并粘贴到浏览器中。
在您的 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();
});
});