Question

今天我尝试使用jQuery创建一个动态下拉列表。我只在开始时在页面上提供了一个选择列表。在用户选择一个选项后，如果所选类别有子类别，则jQuery将在原始选择列表旁边添加一个新的选择列表。

但我不知道如何实现我的想法。如何添加选择列表并向选择列表添加选项，最后使用jQuery将其添加到页面。

我的代码如下：

$.getJSON(
    '/Work/Content/Categories/' + currentValue,
    '{Id:Name}',
    function (data) {
        if (data.length > 0) {
            $current.append('<select></select>');
            $selectList = $('fieldset > select:last');
            $.each(data, function (index, value) {
                var option = new Option(value.Id, value.Name);
                if ($.browser.msie)
                    $selectList.add(option);
                else
                    $selectList.add(option, null);
            });
        }
    }
);

感谢每一个人。

Answer 1

我建议而不是尝试动态地将这样的内容添加到页面中，而是将其全部设置为隐藏并根据输入显示选择列表。

向页面添加新元素是非常昂贵的，并且执行此类操作的代码将非常复杂，但是使用CSS属性display：none和display：block将非常容易（显示： none将隐藏元素，而display：block将显示它。）

这是大多数jQuery插件的方法论，包括jQuery UI倾向于使用。

Answer 2

首先，您需要使用Ajax来执行此操作吗？您是否可以在最初加载页面上的所有选项并仅显示/启用所需的选项？如果有选择的TON，这可能不是最好的选择，但是否则它是Ajax的优秀解决方案。

如果您真的想使用Ajax，则无需使用JSON。为什么不让您正在获取选择数据的页面单独打印出一个实际的选择框，然后将其附加到DOM？

如何使用jQuery向DOM元素添加带选项的选择列表

2 个答案: