下拉列表追加，數組和Vaiidation：jQuery

我正在處理一個下拉列表。初始HTML代碼如下：下拉列表追加，數組和Vaiidation：jQuery

<p><a class="link">Milk</a> <a class="link">Sugar</a><a href="" class="view">View All</a></p> 
    <select id="list"> 

    </select>

當我上的鏈接單擊文本（牛奶，糖，蜂蜜）需要在列表內添加例如當我點擊牛奶時，它應該被添加到選擇列表中。

因此，如果我繼續點擊剩餘的2個鏈接，他們也需要追加到列表中。我已設法通過我可以追加列表的部分。

我面臨的問題是驗證列表中的項目。如果3個項目（牛奶，糖，蜂蜜）已經在列表中存在，當我再次點擊時不應該添加。

此外，當我在viewAll點擊我要收集列表內的所有項目，並將列表下顯示爲已1.牛奶
2.糖
3.蜂蜜

誰能幫我以下內容：驗證重複條目，然後顯示列表。

我jQuery代碼是如下：

var status = null; 
var isEmpty = null; 
var isFull = null; 
var count = 0; 
var newStatus = true; 

$(".link").bind("click", function(a) { 
    var clickItem = a.target.text; 
    //alert (clickItem); 
    checkIsEmpty(); 
    appendClickValue(status, clickItem); 
}); 

$(".view").click(function() { 
    checkIsEmpty(); 
    if (newStatus ==true && count == 0) { 
     alert ("Is Empty " + status); 
     } 
    else if (newStatus == false && count == 1) { 
     alert ("Is Full " + status); 
     } 
}); 

function checkIsEmpty() { 
    if ($("#list option").length <= 0) { 
     isEmpty = true; 
     status = isEmpty; 
    } 
    else if ($("#list option").length >= 1) { 
     isFull = true; 
     status = isFull; 
     } 

} 

function appendClickValue (checkStatus, newItem) { 
    //validateItems(); 
    if (status == true) {  
      $("#list").append("<option>" + newItem + "</option>");  
      count = 1; 
      newStatus = false; 
     } 
}

而且，因爲我是一個初學者我真的很感激，如果你能註釋代碼，所以我可以更好地理解。

來源

2012-02-08 Vish

爲什麼這麼複雜？

HTML：

<ul id="itemsList"> 
    <li><a href="#">Milk</a></li> 
    <li><a href="#">Sugar</a></li> 
    <li><a href="#">Honey</a></li> 
</ul> 
<select name="itemsSelect" id="itemsSelect"></select> 
<button id="viewAll">View All</button> 
<ul id="result"></ul>

的jQuery：

// Cache for speed 
var $itemsSelect = $('#itemsSelect'), 
    $result = $('#result'); 

$('#itemsList').find('a').click(function(){ 
    var _value = $(this).text(); 

    // if select doesn't already contain an option 
    // with `_value` text then add it 
    if (!$itemsSelect.has('option:contains('+ _value +')').length) { 
     $('<option>'+ _value +'</option>').appendTo($itemsSelect); 
    } 
}); 

$('#viewAll').click(function(){ 
    $result.empty(); // clear list first 
    $itemsSelect.find('option').each(function(){ 
     var _value = $(this).text(); 
     $('<li>'+ _value +'</li>').appendTo($result); 
    }); 
});

例http://jsfiddle.net/H2SeT/5/

來源

2012-02-08 21:12:18 elclanrs

我想通過填充點擊選擇列表的點擊。在你的代碼中，列表已經被填充。 – Vish 2012-02-15 15:56:14

你試過這個例子嗎？ http://jsfiddle.net/H2SeT/5/。只需點擊鏈接，它會將它們添加到選擇，如果有重複，它不會添加它。它基本上用少量的代碼來做你想要的。 – elclanrs 2012-02-15 16:14:22

太棒了！這是一個更好的解決方案！ – Vish 2012-02-16 16:05:19

至於複製，只是if語句添加在appendClickValue（）：

if ($("#list option:contains(" + newItem + ")").length == 0)

至於清單中加上一個UL下的選擇，然後在viewAll鏈接

$("#list option").each(function(i) { 
     $("#listAll").append("<li>" + (i+1) + ". " + $(this).val() + "</li>");

http://jsfiddle.net/P7AzL/1/

來源

2012-02-08 21:16:39

下拉列表追加，數組和Vaiidation：jQuery

回答

相關問題