下拉框，带checkbox，多选

看到很多都需要一个下拉的select ,集成多选的功能，就自己写了一个简陋的demo，in peace .有时间修改会再发新的版本

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.2.js" type="text/javascript"></script>
    <link href="style/select.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $(".select_top_02").click(function () {
                var mark = $(this).attr("mark");
                if (mark == "off") {
                    $(".select_down").show();
                    $(this).attr("mark", "on");
                    $(this).addClass("select_top_02_on");
                } else if (mark == "on") {
                    $(".select_down").hide();
                    $(this).attr("mark", "off");
                    $(this).removeClass("select_top_02_on");
                }

            });
            $("#tj").click(function () {
                var newArray = new Array();
                $("input[name=dd]").each(function () {
                    if ($(this).prop("checked") == true) {
                        var text = $(this).val();
                        newArray.push(text);
                    }
                });
                var newText = newArray.join(',');
                $("#select_input").val(newText);
                $(".select_down").hide();
                $(".select_top_02").removeClass("select_top_02_on");
            });
        });
    </script>
    <style type="text/css">
    
    </style>
</head>
<body>
<div class="select_div">
    <div class="select_top">
        <div class="select_top_01">
            <input type="text" id="select_input"/>
        </div>
        <div class="select_top_02" mark="off">
            
        </div>
    </div>
    <div class="select_down">
        <div class="select_checkbox"><input type="checkbox" name="dd" value="1"/>1</div>
        <div class="select_checkbox"><input type="checkbox" name="dd" value="2"/>2</div>
        <div class="select_checkbox"><input type="checkbox" name="dd" value="3"/>3</div>
        <div class="select_checkbox"><input type="checkbox" name="dd" value="4"/>4</div>
        <div class="select_checkbox"><input type="checkbox" name="dd" value="5"/>5</div>
        <div class="select_checkbox"><input type="button" id="tj" value="确定"/></div>
    </div>
</div>

</body>
</html>


css页面：

.select_div
{
    width:200px;
    height:30px;
    position:relative;
    border:1px solid #f58805;
}
.select_top
{
    width:198px;
    height:30px;
}
#select_input
{
    width:198px;
    height:28px;
    border:0px;
}
.select_down
{
    width:200px;
    height:auto;
    position:absolute;
    top:30px;
    left:0px;
    display:none;
}
.select_checkbox
{
    width:200px;
    height:30px;
    line-height:30px;
}
.select_top_01
{
    width:178px;
    height:28px;
    float:left;
}
.select_top_02
{
    width:20px;
    height:28px;
    float:left;
    cursor:pointer;
    background:url(../images/arrow.png) center center no-repeat;
}
.select_top_02_on
{
    background:url(../images/arrow_on.png) center center no-repeat;
}

 

posted @ 2013-12-27 16:32  菠萝君  阅读(1281)  评论(0)  编辑  收藏  举报