我正在處理一個下拉列表。初始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;
}
}
而且,因爲我是一個初學者我真的很感激,如果你能註釋代碼,所以我可以更好地理解。
我想通過填充點擊選擇列表的點擊。在你的代碼中,列表已經被填充。 – 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