jquery+Select2限制搜索下拉框内的选项数量

最新推荐文章于 2023-06-16 11:38:03 发布

AmongDec

最新推荐文章于 2023-06-16 11:38:03 发布

阅读量2.3k

点赞数 1

分类专栏：前端文章标签： js javascript

本文链接：https://blog.youkuaiyun.com/qq_43080270/article/details/107309434

版权

前端专栏收录该内容

1 篇文章

订阅专栏

jquery+Select2限制搜索下拉框内的选项数量

先决条件

这里先规定一下版本，我的select2版本是4.0.12

然后开始导入jquery,大家可以去网上下载一下jquery的相关js，这里我就直接导入进来了

<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/css/select2.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.min.js" ></script>

介绍

先说一下我们要实现一个什么功能，就是我们规定select2的下拉框内最多装多少个元素，例如我规定里面最多只能有10个option，那么你会怎么做呢？

很多人第一印象想到size=10，但是这样真的有用吗？答案是否定的，我用这个规定了但是没什么用。而且试了很多其他网上的办法，都没有用。怎么办呢？只能自己琢磨，自己写js控制了呗！

先来看我们的例子：

<select  class="singleSelect" style="width: 200px;">
    <option value="" selected="true">--请选择客户分组--</option>
    <option value="a">1阿里巴巴</option>
    <option value="y">2阿拉善</option>
    <option value="j">3江南</option>
    <option value="h">4杭州</option>
    <option value="w">5无锡</option>
    <option value="s">6上海</option>
    <option value="h">7湖南</option>
    <option value="c">8长沙</option>
</select>
<script type="text/javascript">
    $(document).ready(function() {

   		 $('.singleSelect').select2({});
    });
</script>

完整实例

当你搞定上面的一切之后代码就会是这个样子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
    	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/css/select2.min.css" />
    	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.min.js" ></script>

    </head>

    <body>
        <div>
            <select  class="singleSelect" style="width: 200px;">
                 <option value="" selected="true">--请选择客户分组--</option>
                 <option value="a">1阿里巴巴</option>
                 <option value="y">2阿拉善</option>
                 <option value="j">3江南</option>
                 <option value="h">4杭州</option>
                 <option value="w">5无锡</option>
                 <option value="s">6上海</option>
                 <option value="h">7湖南</option>
                 <option value="c">8长沙</option>
            </select>
        </div>
        <script type="text/javascript">
            $(document).ready(function() {

                $('.singleSelect').select2({

                });
            });
        </script>
    </body>
</html>

运行出来就是这个样子（带搜索框的，非常帅气）

在这里插入图片描述

我们把下拉框滑到底发现元素都在，那么我们要怎么做才能规定元素的个数呢？

//先获得一个span ， 这个span就是点击就可以打开下拉框的那个span
$('.select2-container .select2-selection--single').click(function(e){ 
    e = window.event || e; // 兼容IE7
    obj = $(e.srcElement || e.target);
    if (!$(obj).is("#a,#a *") ) { 
        
        //首先获得ul下的li列表，也就是获得所有的下拉框内的option
        var ulList = $('.select2-results__options')
        //先判断下拉框内是否有选项
        if(ulList.children().length > 0){
            //循环判断，把超出的部分设置display为none
            for(var i = 0 ; i < ulList.children().length ; i++){
                if(i >= 20){
                    ulList.children().get(i).style.display = "none";
                    console.log(ulList.children().get(6).style.display)
                }else{
                    ulList.children().get(i).style.display = "list-item";
                }
            }	
        }
    } 
});

但是这样做了还有一个问题，就是那个输入框一旦输入，就改变了下拉框里面的内容，那么我们的规定又失效了，没关系再加一个监听input输入框的js函数

$("body").delegate( $('.select2-search__field'), "propertychange input", function () {

    //获得ul下的li列表
    var ulList = $('.select2-results__options')
    if(ulList.children().length > 0){					
        for(var i = 0 ; i < ulList.children().length ; i++){
            if(i >= 20){
                ulList.children().get(i).style.display = "none";
                console.log(ulList.children().get(6).style.display)
            }else{
                ulList.children().get(i).style.display = "list-item";
            }
        }	
    }

});

整个代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
    	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/css/select2.min.css" />
    	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.min.js" ></script>

    </head>
	
        

    <body>
        <div>
            <select  class="singleSelect" style="width: 200px;">

                 <option value="a">1阿里巴巴</option>
                 <option value="y">2阿拉善</option>
                 <option value="j">3江南</option>
                 <option value="h">4杭州</option>
                 <option value="w">5无锡</option>
                 <option value="s">6上海</option>
                 <option value="h">7湖南</option>
                 <option value="c">8长沙</option>
            </select>

        </div>
        <script type="text/javascript">

        $(document).ready(function() {
			
            $('.singleSelect').select2({
				language: {
				    noResults: function(params) {
				   	return "这里输入你要自定义的提示语";
				 	}
				}
			});
			//限制元素个数为20
			var limit = 20
		
			$('.select2-container .select2-selection--single').click(function(e){ 
				e = window.event || e; // 兼容IE7
				obj = $(e.srcElement || e.target);
				if (!$(obj).is("#a,#a *") ) { 
					//要执行的函数
					//获得ul下的li列表
					var ulList = $('.select2-results__options')
					if(ulList.children().length > 0){					
						for(var i = 0 ; i < ulList.children().length ; i++){
							if(i >= 20){
								ulList.children().get(i).style.display = "none";
								console.log(ulList.children().get(6).style.display)
							}else{
								ulList.children().get(i).style.display = "list-item";
							}
						}	
					}
				} 
			});
			
			
			$("body").delegate( $('.select2-search__field'), "propertychange input", function () {

				//获得ul下的li列表
				var ulList = $('.select2-results__options')
				if(ulList.children().length > 0){					
					for(var i = 0 ; i < ulList.children().length ; i++){
						if(i >= 20){
							ulList.children().get(i).style.display = "none";
							console.log(ulList.children().get(6).style.display)
						}else{
							ulList.children().get(i).style.display = "list-item";
						}
					}	
				}
				
			});
				
			
        });

        </script>
    </body>
</html>