выпадающий список Append, Array and Vaiidation: jQuery

Я работаю над выпадающим списком. Исходный HTML-код выглядит следующим образом:выпадающий список Append, Array and 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

Вы пробовали пример? http://jsfiddle.net/H2SeT/5/. Просто щелкните по ссылкам, и он добавит их в список выбора, и если есть дубликат, он просто не добавит его. Он в основном делает то, что вы хотите, с меньшим количеством кода. – elclanrs

Отлично! Это лучшее решение! – Vish

Что касается дублирования, просто добавить, если заявление в appendClickValue():

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/

источник

2012-02-08 21:16:39

выпадающий список Append, Array and Vaiidation: jQuery

ответ

Смежные вопросы