1

Привет всем.

У меня есть список Товаров с названиями, возможно ли вывести их выбраное количество в дефолтное значение dropDown? Например:

Яблоки -

  • Название 1
  • Название 2
  • Название 3
  • Название 4

(Рядом с каждым названием есть checkbox, например выбраны позиции 1,2,3)

Если не открывать Dropdown, то должно быть написано ==> Яблоки - (выбрано 3 элемента)

.cshtml file

                <div>
                <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span></button>
                <ul class="dropdown-menu">
                    @if (Model.Products!= null)
                    {
                        foreach (var s in Model.Products)
                        {
                        <li><a href="#" class="small" data-value="option1" tabIndex="-1"><input type="checkbox" />&nbsp;@Html.DisplayTextFor(model => s.NAME)</a></li>
                        }
                    }
                </ul>
            </div>

.js code

<script type="text/javascript">
var options = [];

$('.dropdown-menu a').on('click', function (event) {

    var $target = $(event.currentTarget),
        val = $target.attr('data-value'),
        $inp = $target.find('input'),
        idx;

    if ((idx = options.indexOf(val)) > -1) {
        options.splice(idx, 1);
        setTimeout(function () { $inp.prop('checked', false) }, 0);
    } else {
        options.push(val);
        setTimeout(function () { $inp.prop('checked', true) }, 0);
    }

    $(event.target).blur();

    console.log(options);
    return false;
});

А если выбран только один элемент (например Название 2), то выводить Яблоки - Название 2

1 ответ 1

1

Просто считать чекбоксы внутри dropdown и обрабатывать при изменениях чекбоксов:

var cb = $('.dropdown-menu input[type=checkbox]:checked'); // выбранные чекбоксы
var cnt = $('.title'); // контейнер, куда выводить текст
if (cb.length === 1) 
    cnt.text('Яблоки - ' + cb.parent().text());
else if (cb.length > 1) 
    cnt.text('Яблоки - (выбрано '+ cb.length +' элемента)');

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.