2010-10-09 76 views
1

今天我嘗試使用jQuery製作動態下拉列表。我只在開始的頁面上提供一個選擇列表。在用戶選擇一個選項後,如果選擇的類別具有子類別,則jQuery將在原始選擇列表旁邊添加一個新的選擇列表。如何使用jQuery將選項添加到DOM元素

但我不知道如何實現我的想法。如何添加選擇列表並將選項添加到選擇列表中,最後使用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); 
      }); 
     } 
    } 
); 

感謝每一個機構。

回答

0

首先,你需要使用Ajax來做到這一點嗎?你可以只加載頁面上的所有選擇,只顯示/啓用適當需要的選擇?如果有TONs選擇這可能不是最好的選擇,但否則它是一個Ajax的優秀解決方案之一。

如果您確實想使用Ajax,則無需使用JSON執行此操作。爲什麼不只是讓頁面中的選擇數據從打印出來的實際選擇框中自行添加,並將其添加到DOM?

0

我會建議,而不是試圖動態地添加這樣的東西到頁面,而不是讓它所有的設置,只是隱藏和顯示選擇列表取決於輸入。

在頁面中添加新元素的代價非常高昂,執行此類操作的代碼將非常複雜,但使用CSS屬性display:none和display:block會非常簡單(顯示:none將隱藏一個元素,而display:block會顯示它)。

這是大多數jQuery插件(包括jQuery UI傾向於使用)的方法。

+0

我真的很想選擇你說的方式。但在我的情況下,一些類別有2個級別的子類別,而一些類別有3個級別的子類別。我嘗試使用複選框列表處理它,但該列表看起來非常鬆散,大而且難看。 – 2010-10-09 07:35:08

相關問題