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

<select name="dictChannelKV"  id="dictChannelKV" th:with="dictList=${@dict.getType('talent_channel')}" class="selectpicker" multiple title="请选择渠道" data-live-search="true" >
	<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>
发布了99 篇原创文章 · 获赞 55 · 访问量 32万+

猜你喜欢

转载自blog.csdn.net/torpidcat/article/details/103406772
今日推荐