使用複選框從多選中獲取所選項目名稱

如何使用複選框從多選中獲取所選項目名稱？我如何將它保存爲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'); 
        } 
       }); 

    } 
});

來源

2017-05-27 kehinde

降低您的問題最小的問題，並建立備份;如何從<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>

在大火得到所有選擇的值，你要使用模板的事件，而不是香草這裏

如果selectedOptions確實增加聽衆不符合所有瀏覽器兼容性要求，您需要額外的步驟才能篩選選擇的選項，僅用於選定的選項。

來源

2017-05-27 14:25:04

使用複選框從多選中獲取所選項目名稱

回答

相關問題