如何使用jQuery将选项添加到DOM元素

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

首先，你需要使用Ajax来做到这一点吗？你可以只加载页面上的所有选择，只显示/启用适当需要的选择？如果有TONs选择这可能不是最好的选择，但否则它是一个Ajax的优秀解决方案之一。

如果您确实想使用Ajax，则无需使用JSON执行此操作。为什么不只是让页面中的选择数据从打印出来的实际选择框中自行添加，并将其添加到DOM？

Answer 2

我会建议，而不是试图动态地添加这样的东西到页面，而不是让它所有的设置，只是隐藏和显示选择列表取决于输入。

在页面中添加新元素的代价非常高昂，执行此类操作的代码将非常复杂，但使用CSS属性display：none和display：block会非常简单（显示：none将隐藏一个元素，而display：block会显示它）。

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