如何在bootstrap selectpicker中获取单击选项？

Question

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

我有一个带有多个＆＃39;的bootstrap selectpicker。选择启用选项。

<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>

单击选择选项（选择或取消选择），我想知道单击了哪个选项。

我试过了。

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

这确实让我觉得自己。但是因为它是一个多选的启用选择器。如果已经选择了一个选项。该选项的ID将被返回。例如，在下面的屏幕截图中

如果我点击星期三，它给我id 2（因为星期二被选中），但实际上星期三的id是3.我想要点击的选项元素的id。

而且我无法通过为选项元素提供一个类来获取选项元素，因为bootstrap selectpicker插件会为所有选项元素创建一个列表，如下所示。

所以，

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

也没有帮助。

周围有人吗？

Answer 1

获取所选选项的相应ID：

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

更新：要获取最后选择的值，请按下数组中的所有选定值并获取最后一个元素的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/