如何在bootstrap selectpicker中获得clicked选项? [英] how to get the clicked option in bootstrap selectpicker?

问题描述

$('.excludeDaysPicker').selectpicker();

我启用了"multiple"选择选项的引导选择器.

I have bootstrap selectpicker with 'multiple' choose option enabled.

<select class="excludeDaysPicker" multiple title="Not Selected">
<option value="Monday" id="1" class="excludeDays">Monday</option>
<option value="Tuesday" id="2" class="excludeDays">Tuesday</option>
<option value="Wednesday" id="3" class="excludeDays">Wednesday</option>
<option value="Thursday" id="4" class="excludeDays">Thursday</option>
<option value="Friday" id="5" class="excludeDays">Friday</option>
<option value="Saturday" id="6" class="excludeDays">Saturday</option>
<option value="Sunday" id="7" class="excludeDays">Sunday</option>
</select>

单击选择选项(选择或取消选择)后，我想知道单击了哪个选项.

upon clicking the select option (either selecting or deselecting), I want to know which option is clicked.

我尝试过.

$('.excludeDaysPicker').on('change',function(){
console.log("id::",$(this).children(':selected').attr('id'));
});

这确实让我获得了身份证.但是由于它是启用了多选功能的选择器.如果已经选择一个选项.该选项的ID被返回.例如，在下面的屏幕截图中

This actually does get me id. But since it is a multiple select enabled selectpicker. if already an option is selected. that option's id is get returned. for ex, in the screen shot below

如果我单击星期三，它会给我id 2(因为选择了星期二)，但是实际上，星期三的id是3.我希望我单击的option元素的id.

if i click on wednesday, It gives me the id 2 (because tuesday is selected), But actually the id of wednesday is 3. I want the id of the option element i am clicking on.

而且我也无法通过给option元素一个类来获取option元素，因为bootstrap selectpicker插件会为所有option元素创建一个列表，如下所示.

And also I could not get the option element by giving the option element a class , because the the bootstrap selectpicker plugin creates a list for all the option element like you can see below.

所以

 $('.excludeDays').click(function()
 {
  console.log("excluded day optionselected::",$(this).attr('id'));  
 });

也无济于事.

周围有男人吗?

推荐答案

获取所选选项的相应ID:

To get the respective id's of the options selected :

$('.excludeDaysPicker').on('change',function(){
    $(this).find("option:selected").each(function()
    {
        alert($(this).attr("id"));
    });
});

UPDATE:要获取最后选择的值，请在数组中推送所有选择的值，并获取最后一个元素的ID.

UPDATE : To get the last selected value, push all selected values in the array and get the last element's id.

    var arr = new Array();
$('.selectpicker').on('change', function(){
     $(this).find("option").each(function()
     {
         if($(this).is(":selected"))
         {             
            id = $(this).attr("id");
            if(arr.indexOf(id) == -1)
            {
               arr.push(id);
            }
         }
         else
         {
             id = $(this).attr("id");
             arr = jQuery.grep(arr, function(value) {
              return value != id;
            });             
         }
     });

if(arr.length > 0)
    alert("Last selected id : " + arr[arr.length-1]);

  });

http://jsfiddle.net/wd1z0zmg/3/

这篇关于如何在bootstrap selectpicker中获得clicked选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！