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

Posted 2023-05-07

【中文标题】选择和取消选择时从选择框中获取值

【英文标题】：Get values from select box when select and unselect

【发布时间】：2018-09-19 14:22:22

【问题描述】：

当您使用选择选项时如何从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>

【问题讨论】：

它有更改事件吗？不知道图书馆是什么，所以无能为力，也不会去谷歌搜索可能列出它的文档。

@epascarello 是的，我已经更新了问题

RTM: select2.org/programmatic-control/events

【参考方案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);

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

【讨论】：

你好，戴夫，为什么在选择和取消选择选项时显示 event. added 是空错误，

【参考方案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;
          
      );

希望对你有帮助。

【参考方案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。

希望这对您有所帮助。

【讨论】：

你好，韦伯感谢您的回答它工作正常。现在如何添加值？

@ManjunathCa 在哪里增加价值。？

我已经更新了问题，将选项值字符串更改为整数，我需要添加选定的值，

我也更改了值，但是您想要什么，您想将选定的值添加到一个值。？？或者只是将它们结合起来。？我不明白。

我想把选中的值加到一个值上，