使用复选框从多选中获取所选项目名称答案

【问题标题】：Get selected items names from multiselect with checkboxes使用复选框从多选中获取所选项目名称
【发布时间】：2017-05-27 22:25:04
【问题描述】：

如何通过复选框从多选中获取所选项目名称？我如何将它保存为 Meteor js 中的记录，因为它可能是一个数组。我从一个站点得到了这个漂亮的多选复选框。如何从下拉列表中获取选中的项目/名称？

<template name="AddSchoolLayout">
<div class="form-group" style="padding-bottom: 40px;">
    <div class="dropdown-container" id="educationascope" style="width: 100%;">
        <div class="dropdown-button noselect" id="educ_scope">
            <div class="dropdown-label" id="ed_scope">Educational Scope</div>
            <div class="dropdown-quantity">(<span class="quantity">Any</span>)</div>
            <i class="fa fa-filter"></i>
        </div>
        <div class="dropdown-list" id="scope_edu" style="display: none; width: 100%;">
            <input type="search" id="search_edu" placeholder="Search/Select Educational Scope" class="dropdown-search form-control" style="width: 100%;" />
            <ul></ul>
        </div>
    </div>
</div>
<script>
$('#educationascope')
    .on('click', '#educ_scope', function() {
        $('#scope_edu').toggle();
    })
    .on('input', '#search_edu', function() {
        var target = $(this);
        var search = target.val().toLowerCase();

        if (!search) {
            $('li').show();
            return false;
        }

        $('li').each(function() {
            var text = $(this).text().toLowerCase();
            var match = text.indexOf(search) > -1;
            $(this).toggle(match);
        });
    })
    .on('change', '[type="checkbox"]', function() {
        var numChecked = $('[type="checkbox"]:checked').length;
        $('.quantity').text(numChecked || 'Any');
    });

// JSON of School curriculum for demo purposes

    var eduscope = [
        { name: 'Scotish', abbreviation: 'SC'},
        { name: 'Nigerian', abbreviation: 'NG'},
        { name: 'Britsh', abbreviation: 'BR'},
        { name: 'American', abbreviation: 'AM'},
        { name: 'Canadian', abbreviation: 'CA'},
        { name: 'Mexican', abbreviation: 'WY' }
    ];

    // <li> template
    var schoolTemplate = _.template(
        '<li>' +
            '<input name="<%= abbreviation %>" type="checkbox">' +
            '<label for="<%= abbreviation %>"><%= capName %></label>' +
        '</li>'
    );

    // Populate list with states
    lodash.each(eduscope, function(s) {
        s.capName = lodash.startCase(s.name.toLowerCase());
        $('ul').append(schoolTemplate(s));
    });
    </script>
    </template>

这是事件类

Template.AddSchoolLayout.events({
    'submit .addnewschool': function (event, template) {
        event.preventDefault();

        var selectedvalues = $('input[type=checkbox]:checked').map(function(_, el) {
            return $(el).val();
        }).get();

        Meteor.call('SchoolRegister', selectedvalues,
                function (error, response) {
                    if (error) {
                        return false;
                    }else{
                        FlowRouter.redirect('/contact');
                    }
                });

    }
});

【问题讨论】：

标签： jquery meteor multi-select meteor-blaze checkboxlist

【解决方案1】：

将您的问题减少到最小的问题并建立备份；如何从<select>HTMLSelectElement获取所有选定的值

var select = document.querySelector('.foo');

select.addEventListener('change', function (e) {
    var values = Array.prototype.map.call(
        e.currentTarget.selectedOptions,
        function (option) {
            return option.value;
        }
    );
    console.log(values);
});

<select multiple class="foo">
    <option value="bar">A</option>
    <option value="baz">B</option>
</select>

在 blaze 中，您将使用模板的事件添加侦听器，而不是这里的 vanilla

如果selectedOptions 不满足您的所有浏览器兼容性要求，您将需要一个额外的步骤来过滤选择的选项，仅针对选定的选项。

【讨论】：