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

今天，我尝试使用jQuery创建一个动态dropdownlist。开始时，我仅在页面上提供一个选择列表。在usser选择一个选项后，如果所选类别有子类别，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);
            });
        }
    }
);

$.getJSON(
“/Work/Content/Categories/”+当前值，
“{Id:Name}”，
功能（数据）{
如果（data.length>0）{
$current.append（“”）；
$selectList=$（'fieldset>select:last'）；
$.each（数据、函数（索引、值）{
var option=新选项（value.Id，value.Name）；
如果（$.browser.msie）
$selectList.add（可选）；
其他的
$selectList.add（选项，空）；
});
}
}
);

---

谢谢大家。

我建议大家不要尝试在页面中动态添加这样的内容，而是进行所有设置，根据输入隐藏并显示选择列表

向页面添加新元素的成本非常高，执行类似操作的代码将非常复杂，但是使用CSS属性display:none和display:block将非常容易（display:none将隐藏元素，而display:block将显示它）

---

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

首先，您需要使用Ajax来实现这一点吗？您是否可以先加载页面上的所有选择，然后只显示/启用适当需要的选择？如果有大量的选择，这可能不是最好的选择，但它是一个优于Ajax的解决方案

---

如果您真的想使用Ajax，就不需要使用JSON。为什么不让从中获取选择数据的页面自己打印出一个实际的选择框，并将其附加到DOM中？

我真的想选择你说的方式。但在我的场景中，有些类别有2级子类别，而有些类别有3级子类别。我尝试使用复选框列表来处理它，但是列表看起来非常松散、庞大和丑陋。