如何在Bootstrap SelectPicker中获取所选选项？

Question

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

我有一个启用了“多选”选项的Bootstrap选择器。

<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。但由于它是一个启用了多选的selectpicker，如果已经选择了一个选项，则将返回该选项的id。例如，在下面的屏幕截图中。

如果我点击星期三，它会给我ID为2（因为已选择星期二），但实际上星期三的ID是3。我想要我点击的选项元素的ID。

另外，我无法通过给选项元素添加类来获取选项元素，因为bootstrap selectpicker插件为所有选项元素创建了一个列表，如下所示。

所以，

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

这也没有帮助。

有什么解决办法吗？

- Karthik Amar

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/

- DinoMyte

---

嗨Dino。但我不想要所有被选中的选项，而是当前正在被选中的那个。 - Karthik Amar

请参考更新部分。 - DinoMyte

Answer 2

获取最后一次点击的值

$(".excludeDaysPicker").on("changed.bs.select", function(e, clicked, curr, prev) {
    var currentVal = $(this).find('option').eq(clicked).val();
    alert(currentVal);
});

如果有人正在寻找动态生成的多选框中最后点击的值

$(document).on("changed.bs.select",".excludeDaysPicker", function(e, clicked, curr, prev) {
    var currentVal = $(this).find('option').eq(clicked).val();
    alert(currentVal);
});

https://jsfiddle.net/GannyBhai/cuygr0mf/22/

- Ganesh_G