раскрывающийся список «Добавить», «Массив и проверка»: jQuery - PullRequest
Новая
       35

раскрывающийся список «Добавить», «Массив и проверка»: jQuery

0 голосов
/ 09 февраля 2012

Я работаю над выпадающим списком.Исходный код HTML выглядит следующим образом: 

<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 элемента (Молоко, Сахар, Мед) уже существуют в списке, их не следует добавлять при повторном нажатии.

Кроме того, когда я нажимаю на кнопку просмотра, я хочу собрать все элементы внутри списка ипоказать их под списком как 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;
        }
}

Такжетак как я новичок, я был бы очень признателен, если бы вы могли прокомментировать код, чтобы я мог лучше понять.

Ответы [ 2 ]

0 голосов
/ 09 февраля 2012

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

if ($("#list option:contains(" + newItem + ")").length == 0)

Что касается списка, добавьте ul под select, а затем нажмите на ссылку viewAll 

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

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

0 голосов
/ 09 февраля 2012

Почему так сложно?

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/

...