在我的 php 中,我创建了两个下拉列表或选择列表。我的下拉列表如下:
<select name="food">
<option value="">...</option>
<option value="Fruits">Fruits</option>
<option value="Vegetables">Vegetables</option>
</select>
<select name="type">
<option value="">--</option>
<option value="Apple">Apple</option>
<option value="Lettuce">Lettuce</option>
<option value="Orange">Orange</option>
<option value="Tomato">Tomato</option>
<option value="Carrots">Carrots</option>
<option value="Mango">Mango</option>
</select>
m 一页到下一页。
使用 jQuery 可以做到这一点,但在大型应用程序或网站中它很快就会变得难以管理。
如果你走这条路,我会避免使用两个不同的选择框,因为这将迫使你为表单 POST 选择两个不同的名称,除非你使用更多的 jQuery 黑客来解决这个问题.
我的建议是看一个轻量级的 JS 框架。 Knockoutjs有你需要的。
Look at this JSFiddle .
var fruitOpts = ["Apple", "Orange", "Mango"];
var vegOpts = ["Lettuce", "Tomato", "Carrots"];
$("#food").change(function () {
var val = $(this).val();
if (val === "") {
return;
}
$("#type").find('option').not(':first').remove().end();
$.each(val === "Fruits" ? fruitOpts : vegOpts, function (i, v) {
$("#type").append("<option value=\"" + v + "\">" + v + "</option>");
});
$.each(val === "Fruits" ? vegOpts : fruitOpts, function (i, v) {
$("#type").append("<option value=\"" + v + "\">" + v + "</option>");
});
});