一个简单的实现下拉框多选的插件

最新推荐文章于 2023-10-07 15:03:47 发布

置顶潮神

最新推荐文章于 2023-10-07 15:03:47 发布

阅读量804

点赞数

分类专栏： jquery 文章标签： select checkbox js javascript 源代码

本文链接：https://blog.csdn.net/qinchaoguang123456/article/details/24986127

版权

jquery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在使用上次写的一个多先下拉框时，我发现了很多问题，经过修改和完善后，现在已经能够很好地使用了，且可移植性也比较好，下面是源代码。

(function(){

    $.fn.extend({
        checks_select: function(options){
            jq_checks_select = null;
            $(this).val("---请选择---");
            $(this).next().empty();		//先清空
            $(this).unbind("click");
            $(this).click(function(e){
                jq_check = $(this);
                //jq_check.attr("class", "");
                if (jq_checks_select == null) {
                	jq_checks_select = jq_check.next();
                	jq_checks_select.addClass("checks_div_select");
                    //jq_checks_select = $("<div class='checks_div_select'></div>").insertAfter(jq_check);
                    $.each(options, function(i, n){
                        check_div=$("<div><input type='checkbox' value='" + n + "'>" + n + "</div>").appendTo(jq_checks_select);
						check_box=check_div.children();
						check_box.click(function(e){
							//jq_check.attr("value",$(this).attr("value") );
							
							temp="";
							$(this).parents().find("input:checked").each(function(i){
								if(i==0){
									temp=$(this).val();
								}else{
									temp+=","+$(this).val();	
								}
							});
							//alert(temp);
							jq_check.val(temp);
							e.stopPropagation(); 
						});
                    });
                    jq_checks_select.show();
                }else{
					jq_checks_select.toggle();	
					
				}
				e.stopPropagation(); 
            });
			$(document).click(function () {
				flag=$("#test_div");
				if(flag.val()==""){
					flag.val("---请选择---");
				}
				jq_checks_select.hide(); 
			}); 
            //$(this).blur(function(){
					//jq_checks_select.css("visibility","hidden");
				//alert();
            //});
        }
    })
    
})(jQuery);

html

<html>
    <head>
        <script type="text/javascript" src="js/jquery.js">
        </script>
        <script type="text/javascript" src="js/jquery_mutili.js">
        </script>
        <script language="javascript">
            $(document).ready(function(){
                var options = {
                    1: "第一个选择项",
                    2: "第二个选择项",
                    3: "第三个选择项",
                    4: "第四个选择项",
                    5: "第五个选择项",
                    6: "第六个选择项"
                };
                $("#test_div").checks_select(options);
            });
        </script>
        <style>
            .checks_div_select {
				width: 150px;
                background-color: #e9fbfb;
                border: 1px solid #18cbcd;
                font-family: 'Verdana', '宋体';
                font-size: 12px;
				position:absolute;
				left:2px;
				top:25px;
            }
        </style>
    </head>
    <body>
        <div style="position:relative;">
            <input type="text" id="test_div" readonly="readonly"/>
	    <div></div>
        </div>
    </body>
</html>