ドロップダウンリストAppend、Array and Vaiidation：jQuery

Question

私はドロップダウンリストを作成中です。初期のHTMLコードは次のとおりです。私はリンクの上にテキストをクリックすると

<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つのアイテム（ミルク、シュガー、ハニー）がすでにリストに存在する場合は、再度クリックすると追加しないでください。

iを1牛乳として、私は、リスト内のすべてのアイテムを収集し、リストの下に表示したいviewAllをクリック
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; 
     } 
} 

また、私はあなたが私がよりよく理解できるコードにコメントをすることができれば、私は本当に感謝していますので、初心者。

Answer 1

なぜ複雑ですか？

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/

Answer 2

、ちょうどappendClickValue（でif文を追加）：

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

リストについては、私はクリックによる選択リストを移入しようとしていますviewAllリンク

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

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