如何在 SumoSelect 下拉列表中获取选定的值？答案

【问题标题】：How to get selected values in SumoSelect dropdown?如何在 SumoSelect 下拉列表中获取选定的值？
【发布时间】：2015-12-16 08:16:09
【问题描述】：

我正在使用SumoSelect 下拉菜单进行多选选项。但我无法获得选定的值数组。示例代码下方：

<script type="text/javascript">
    $(document).ready(function () {         
    window.testSelAll = $('.testSelAll').SumoSelect({okCancelInMulti:true, selectAll:true });           

        $('.btnOk').on('click', function(){
            var obj = [];
            $('option:selected').each(function () {
                obj.push($(this).index());  
                alert("Selected Values=="+$(this).val());   
            });

            for (var i = 0; i < obj.length; i++) {                      
                $('.testSelAll')[0].sumo.unSelectItem(obj[i]);
            }
        });                 
    });

</script>

<select multiple="multiple" placeholder="Share Your Friends" onchange="console.log($(this).children(':selected').length)" class="testSelAll">
                <option value="1">Volvo</option>
               <option value="2">Saab</option>
               <option  value="3">Mercedes</option>
               <option value="audi">Audi</option>
               <option value="bmw">BMW</option>
               <option value="porsche">Porche</option>
               <option value="ferrari">Ferrari</option>
               <option value="mitsubishi">Mitsubishi</option>
       </select>

【问题讨论】：

标签： javascript jquery sumoselect.js

【解决方案1】：

如果您想要选择的 values 而不是 text，只需将 .text() 更改为 .val()。

如果您想获取数组，请参阅下方的工作示例。

jQuery

$(document).ready(function() {
  $('.testSelAll').SumoSelect({
    okCancelInMulti: true,
    selectAll: true
  });

  $('.btnOk').on('click', function() {
    var obj = [],
        items = '';
    $('.testSelAll option:selected').each(function(i) {
      obj.push($(this).val());
      $('.testSelAll')[0].sumo.unSelectItem(i);
    });
    for (var i = 0; i < obj.length; i++) {
      items += ' ' + obj[i]
    };
    alert(items);
  });
});

HTML

<select multiple="multiple" class="testSelAll">
  <option value="car1">Volvo</option>
  <option value="car2">Saab</option>
  <option value="car3">Mercedes</option>
  <option value="car4">Audi</option>
</select>

Working JSFIDDLE

【讨论】：

@RamaLingam 不客气。如果解决了您的问题，请标记为正确答案。干杯！

【解决方案2】：

您可以从底层隐藏的选择元素中获取它们。例如使用 jquery。

$('.select1 option:selected')

【讨论】：

我想要选定的数组值。
你能提供一个小提琴吗？

【解决方案3】：

我认为最干净的方法是这样做。就是利用了 SumoSelect 底层的 html5 选择元素。

HTML

<select multiple="multiple" class="testSelAll" id="multi-select">
  <option value="car1">Volvo</option>
  <option value="car2">Saab</option>
  <option value="car3">Mercedes</option>
  <option value="car4">Audi</option>
</select>

Javascript

var values = $('#multi-select').val();

此行将返回所选值的字符串列表。

【讨论】：