我想让它在单击按钮时，下拉菜单中的某些值稍后会出现在同一文档中。
例如，如果有一个名为 Honda 的按钮，单击它会将下拉菜单中的内容更改为汽车的型号详细信息。
这怎么可能？
上下文：启用 PHP 的服务器上的网页
提前致谢！
【问题讨论】：
标签： php javascript html
我建议最简单的解决方案是 JavaScript。使用框架来完成如此简单的任务似乎超负荷：
<html>
<head><title>JS example</title></head>
<body>
<script type="text/javascript"><!--
//
var opt_one = new Array('blue', 'green', 'red');
var opt_two = new Array('plaid', 'paisley', 'stripes');
//
function updateTarget() {
var f = document.myform;
var which_r = null;
if (f) {
// first option selected? ("One")
if (f.trigger.value == '1') {
which_r = opt_one;
// ...or, second option selected? ("Two")
} else if (f.trigger.value == '2') {
which_r = opt_two;
// no known option, hide the secondary popup
} else {
f.target.style.display = 'none';
}
// did we find secondary options for the selection?
if (which_r) {
// reset/clear the target pop-up
f.target.innerHTML = '';
// add each option
for (var opt in which_r) {
f.target.innerHTML += '<option>' + which_r[opt] + '</option>';
}
// display the secondary pop-up
f.target.style.display = 'inline';
}
}
} // updateTarget()
//-->
</script>
<form name="myform" action="#">
<select name="trigger" onchange="updateTarget();">
<option>Select one...</option>
<option>-</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<select name="target" style="display:none;">
</select>
</form>
</body>
</html>
【讨论】：
您可以使用 jquery 执行此操作，使用一个 PHP 后端脚本根据您单击的按钮填充选择框的值。
一些简单的 HTML 开头：
<form action="script.php">
<button id="Honda" onClick="loadModelsForMake('Honda');">Honda</button>
<button id="Toyota" onClick="loadModelsForMake('Toyota');">Toyota</button>
<select name="models" id="models">
<option value="">Please Select A Make</option>
</select>
</form>
然后，您需要设置一个 PHP 脚本，以便在给定所选品牌的情况下为您提供适当的值列表。最好在后端执行此操作，这样您就不会在您的 javascript 代码中对内容进行硬编码。创建一个名为 models.php 的文件。它将查找查询字符串中定义的“make”变量，并返回该 make 的 JSON 模型数组。如果你愿意，你可以把它连接到一个模型数据库，这样你就不用硬编码了：
<?php
$models = array();
if ($_GET['make'] == 'Toyota') {
models[] = array(id: 0, name: 'Matrix'});
models[] = array(id: 1, name: 'Yaris'});
} else if ($_GET['make'] == 'Honda') {
models[] = array(id: 0, name: 'Civic'});
models[] = array(id: 1, name: 'Pilot'});
}
echo json_encode($models);
?>
最后，您需要 JQuery 将它们连接在一起。将此脚本块添加到您的页面：
<script type="text/javascript" charset="utf-8">
function loadModelsForMake(carMake) {
$.getJSON("/models.php", {make: carMake, ajax: 'true'}, function(json){
var options = '';
for (var i = 0; i < json.length; i++) {
options += '<option value="' + json[i].id+ '">' + json[i].name + '</option>';
}
$("models").html(options);
})
}
</script>
当然要确保在页面中包含基本的 jQuery 脚本；）
【讨论】：
您需要使用 AJAX，而 jQuery 内置的函数可以让这变得更简单。
对于按钮本身，您将使用 onclick 来启动请求。
<input type="button" onclick="carRequest('honda');" />
【讨论】：