javascript - 如何动态生成下拉菜单

标签 javascript php

<分区>

在我的 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>");
    });
});

关于javascript - 如何动态生成下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23881041/

相关文章:

javascript - jquery Click事件不会触发

javascript - 如何在不使用 View 的情况下删除 MVC 中的记录?

PHP 5.5 OPCache 不适用于 apache

javascript - 修改 JavaScript 对象

javascript - Mozilla 关闭示例

php - 我的 SQL 语句有什么问题?如何正确使用JOIN?

php - MySQL多过滤器实时实现

javascript - 为什么文本输入字段消失(html、php)?

php - SQLSTATE [HY093]:找不到解决方案

javascript - jQuery 和 masonry() : animated objects flickering in Chrome