bootstrap-select多选控件的选中取消选中事件(click事件)

发布时间 2023-03-22 21:17:08作者: 末末随笔

<select name="dictChannelKV" id="dictChannelKV" th:with="dictList=${@dict.getType('talent_channel')}" class="selectpicker" multiple title="请选择渠道" data-live-
<option th:each="dict : ${dictList}" th:text="${dict.dictLabel}"
th:value="|${dict.dictValue},${dict.dictLabel}|" ></option>
</select>
<script type="text/javascript">
var channelArr = [];//所有渠道选项
var channelArr2 = [];
$(function() {
//获取所有选项,参考 https://www.iiiff.com/article/237268
//获取所有渠道选项,放⼊数组中,选项被选中时需要⽤到此数组
channelArr = $("#dictChannelKV option").map(function () {
return $(this).val();
}).get();
//或者遍历获取选项并填充到数组中
$("#dictChannelKV option").each(function(){
channelArr2.push($(this).val());
})
});
//bootstrap-select 选中/取消选中事件
$('#dictChannelKV').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
if(isSelected){
alert("被选中");
}else{
alert("取消选中");
}
alert($(this).val());//被选中的所有选项值 (所有选项值会存在⼀个数组中,按选项的上下顺序排序)
alert(e.target.value);//下拉单选,选中事件,获取当前被选中项的value(第⼀个被选中项的值)
alert(clickedIndex);//当前被点击项所在的下标索引
alert(channelArr[clickedIndex]);//下拉多选或⼤选的选中事件,获取当前被选中项的value
// alert(channelArr2[clickedIndex]);
});
</script>