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

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

posted on   末末随笔  阅读(497)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火,是硬核还是营销?
· 一文读懂知识蒸馏
· 终于写完轮子一部分:tcp代理 了,记录一下

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示