没有使用ajax时做select2多选下拉选,不让下拉选选中的文本值相同

需求:用户选择的多选下拉选中的文本不能够相同,如果选中相同则在前端拦截不让表单提交

下拉选是根据ID来获取的,文本是 id - payment 拼接成的

思路: select2里面的值不知道为什么,会有很多的空格,所以先去除掉文本的空格,有可能是因为做的拼接导致的问题
当直接获取id的时候 .val(),是能够获取到所有选中的id,而用相同的方法 .text()的时候,就会获取到下来选里面所有的文本框

所以将id跟获取到的文本值进行判断,文本值要截取’-'后面的值,将截取到的值放到一个数组里
然后用这个数组进行判断

$('#ID').change(function() {
            var str = $.trim($(this).text());
            var str1 = str.replace(/\s+/g, ' ');
            var str2 = $.trim(str1);   //select2中里面的值默认有很多空格,需要去除
            var text = str2.split(" ");   //所有的文本值

            var id = $('#ID').val();    //获取当前事件标签的值

            var arr0=[];
            if(id!=null){
	            for (var j= 0; j < id.length; j++) { //获取当前事件标签的值
	
	                for (var i = 0; i < text.length; i++) {
	
	                    if(text[i].split("-")[0]==id[j]){
	                        var txtstr = text[i].split("-")[1];
	                        arr0.push(txtstr);  //存入数组中
	                    }
	                }
	            }
	            var nary=arr0.sort(); //数组排序
	            for(var i=0;i<nary.length;i++){
	                if (nary[i]==nary[i+1]){ //判断选中的payment是否重复
	                    payment = 1;
	                    return $("#idMsg").text("* 参数已存在请重新选择!");
	                } else {
	                    payment = 0;
	                    return $("#idMsg").text("*")
	                }
	            }
            }
        })

完成后效果

select2内的结构

原本的想法是只能往里面一直获取它的子元素来作对比,后来拿到里面都只能是拿到最后一个li的属性,最后一个li的属性就是select2一直默认存在的,如果是不选的话会在那里显示你想要显示的内容,比如说:’‘请选择’’,后来就换成上面的思路

可能是没有用到ajax的原因,如果是多选的话无法获取到当前选中的值