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>

当我点击链接时，需要在列表中添加文本（牛奶，糖，蜂蜜），例如当我点击Milk时，它应该被添加到选择列表中。

所以这样，如果我继续点击剩下的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;
        }
}

另外，由于我是初学者，如果你能对代码发表评论以便我能更好地理解，我将非常感激。

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)

对于列表，在select下添加ul，然后单击viewAll链接

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

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

下拉列表Append，Array和Vaiidation：jQuery

2 个答案: