下拉列表追加，数组和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

回答

相关问题