选择和取消选择时从选择框中获取值

Question

当您使用选择选项时如何从select box 中获取值，以及如何在取消选择选项时获取值

我正在使用此代码

$('.select2-multiple').select2MultiCheckboxes({
    placeholder: "Choose multiple elements",
})

我已尝试使用以下代码为change event

    $("#sel-01").change(function()  
    {    
         var  value =  this.value;
         if (value != "") 
         {
            alert("Selected")
         }
         else
         {
            alert("Not selected")
         }
    });

JSFiddle

/**
 * jQuery Select2 Multi checkboxes
 * - allow to select multi values via normal dropdown control
 * 
 * author      : wasikuss
 * repo        : https://github.com/wasikuss/select2-multi-checkboxes/tree/select2-3.5.x
 * inspired by : https://github.com/select2/select2/issues/411
 * License     : MIT
 */

jQuery(function($) {
  $('.select2-multiple').select2MultiCheckboxes({
    placeholder: "Choose multiple elements",
  })

  $("#sel-01").change(function() {
    var value = this.value;
    if (value != "") {
      alert("Selected")
    } else {
      alert("Not selected")
    }
  });

});

.select2-result-label .wrap:before {
  position: absolute;
  left: 4px;
  font-family: fontAwesome;
  color: #999;
  content: "\f096";
  width: 25px;
  height: 25px;
}

.select2-result-label .wrap.checked:before {
  content: "\f14a";
}

.select2-result-label .wrap {
  margin-left: 15px;
}


/* not required css */

.row {
  padding: 10px;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script type="text/javascript" src="https://rawgit.com/wasikuss/select2-multi-checkboxes/select2-3.5.x/select2.multi-checkboxes.js"></script>
<div class="row">
  <select name="sel-01" id="sel-01" class="select2-multiple">
    <option></option>
    <option value="100">india</option>
    <option value="200">California</option>
    <option value="300">New York</option>
    <option value="400">Texas</option>
    <option value="500">Wyoming</option>
  </select>
</div>

Answer 1

我在这里添加了一个选择器来获取选择元素内的所有选项：http://jsfiddle.net/z7aL1gf6/78/

var options = Array.from($('#sel-01 option'));
     var checked = [];
     var unchecked = [];
     options.forEach(opt => {
       if (opt.className === 'checked') {
        checked.push(opt.value)
      } else {
        unchecked.push(opt.value)
      }
     });
     // check console: View -> Developer Tools
     console.log('CHECKED:',checked);
     console.log('UNCHECKED',unchecked);

如果这能让您更接近您的解决方案，请告诉我。

Answer 2

您必须删除 onchange 事件，并在您的 select2MultiCheckboxes 中添加一个函数，

jQuery(function($) {
      $('.select2-multiple').select2MultiCheckboxes({
        placeholder: "Choose multiple elements",
        formatSelection: function(selected) { 
            console.log(selected); // you will get the dropdown selected values in array format.
            return selected;
          }
      });

希望对你有帮助。

Answer 3

这对你很有效：

我已使用selected.added 获取您的选定值。

通过将 each 函数与添加的类 .checked 结合起来，我得到了 未选择的值

为了获得所选值的总值，我将数组与for loup 组合在一起。

/**
 * jQuery Select2 Multi checkboxes
 * - allow to select multi values via normal dropdown control
 * 
 * author      : wasikuss
 * repo        : https://github.com/wasikuss/select2-multi-checkboxes/tree/select2-3.5.x
 * inspired by : https://github.com/select2/select2/issues/411
 * License     : MIT
 */

jQuery(function($) {
  $('.select2-multiple').select2MultiCheckboxes({
    placeholder: "Choose multiple elements"
  });

  $('.select2-multiple').on('change', function(selected) {
    var selected = selected.added,
      UnSelect = [],
      total = 0;
    for (var i = 0; i < selected.length; i++) {
      total += selected[i] << 0;
    }
    $(this).find('option').each(function() {


      if (!$(this).hasClass('checked')) {
        var UnS = $(this).attr('value');
        UnSelect.push(UnS);
      }
    });
    console.log('Unselected = ' + UnSelect, 'Selected = ' + selected);
    console.log(total);
  });

});

.select2-result-label .wrap:before {
  position: absolute;
  left: 4px;
  font-family: fontAwesome;
  color: #999;
  content: "\f096";
  width: 25px;
  height: 25px;
}

.select2-result-label .wrap.checked:before {
  content: "\f14a";
}

.select2-result-label .wrap {
  margin-left: 15px;
}


/* not required css */

.row {
  padding: 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/wasikuss/select2-multi-checkboxes/select2-3.5.x/select2.multi-checkboxes.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.js"></script>


<div class="row">
  <select name="sel-01" id="sel-01" class="select2-multiple">
    <option value="100">india</option>
    <option value="200">California</option>
    <option value="300">New York</option>
    <option value="400">Texas</option>
    <option value="500">Wyoming</option>
  </select>
</div>

如果你愿意，可以给你一个fiddle。

希望这对您有所帮助。