javascript 如何在 SumoSelect 下拉列表中获取选定的值?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/34306924/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 17:31:19  来源:igfitidea点击:

How to get selected values in SumoSelect dropdown?

javascriptjquerysumoselect.js

提问by Ramalingam Perumal

I am using the SumoSelectdropdown for multiselect options. But i cannot get the selected values array. Below the sample code :

我正在使用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>

回答by Magnus Engdal

If you want the selected valuesinstead of the text, just change .text()to .val().

如果您想要选定的而不是文本,只需更改.text().val().

If you want to get the array, see below with working example at the bottom.

如果您想获取数组,请参阅下面的底部工作示例。

jQuery

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

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

工作JSFIDDLE

回答by brandelizer

You can get them from underlying hidden select element. using jquery eg.

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

$('.select1 option:selected')

回答by Mazen Elkashef

I think the cleanest way to do this. Is to take advantage of html5 select element underlying SumoSelect.

我认为最干净的方法来做到这一点。就是利用了SumoSelect底层的html5 select元素。

HTML

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

Javascript

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

This line will return a string list of the values selected.

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