Question

I am working on a drop down list. The initial HTML code is as follows:

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

    </select>

When I click on the links the Text (Milk, Sugar, Honey) needs to be added inside the list e.g.
When I click on Milk it should be added to the select list.

So this way if I continue clicking the remaining 2 links they also need to append to the list. I have managed to get thru to the part where I can append the list.

The problem I am facing is with validation of the items in the list. if the 3 items (Milk, Sugar, Honey) already exists in the list it should not be added when I click again.

Also, when i click on viewAll I want to gather all the Items inside the list and show them under the list as 1. Milk
2. Sugar
3. Honey

Can anyone help me with the following: The Validation for duplicate entry and then to display the list.

My jQuery Code is as follow:

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;
        }
}

Also, since I am a beginner I would really appreciate if you could comment the code so I can understand better.

Answer 1

Why so complicated?

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);
    });
});

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