在下拉过滤器中具有两个位于同一级别的复选框

Question

我需要一个带有两个复选框的下拉过滤器（在同一级别），如下所示。我怎样才能做到这一点？这有可能实现使用Jquery吗？用户将为剧院选择一个值，他可以选择是否有特色！请帮助我们如何实现这一目标。提前致谢。

Answer 1

多列/多选下拉框复选框

DEMO

<强> HTML

<dl class="dropdown">    
    <dt>
        <a href="#">
            <span class="hida">Select</span>    
            <p class="multiSel"></p>  
        </a>
    </dt>

    <div class="mutliSelect">
        <ul>
            <li class="Col1">
                <input type="checkbox" value="Col1A" />Col1 A</li>
            <li class="Col2">
                <input type="checkbox" value="Col2A" />Col2 A</li>
            <li class="Col1">
                <input type="checkbox" value="Col1B" />Col1 B</li>
            <li class="Col2">
                <input type="checkbox" value="Col2B" />Col2 B</li>
            <li class="Col1">
                <input type="checkbox" value="Col1C" />Col1 C</li>
            <li class="Col2">
                <input type="checkbox" value="Col2C" />Col2 C</li>
            <li class="Col1">
                <input type="checkbox" value="Col1D" />Col1 D</li>
            <li class="Col2">
                <input type="checkbox" value="Col2D" />Col2 D</li>
        </ul>
    </div>    
</dl>

<强> CSS

body {  
    font: normal 14px/100% "Andale Mono", AndaleMono, monospace;
    color:#fff;
    padding: 50px;
    width: 300px;
    margin: 0 auto;
    background-color: #374954;

} 
a {
    color:#fff;
}
.mutliSelect, .dropdown dt {
    margin:0px;
    padding:0px;
}
.dropdown ul {
    margin: -1px 0 0 0;
}
.mutliSelect {
    position:relative;
}
.dropdown a, 
.dropdown a:visited {
    color:#fff;
    text-decoration:none;
    outline:none;
    font-size: 12px;
}
.dropdown dt a {
    background-color:#4F6877;
    display:block;
    padding: 8px 20px 5px 10px;
    min-height: 25px;
    line-height: 24px;
    overflow: hidden;
    border:0;
    width:272px;
}
.dropdown dt a span, .multiSel span {
    cursor:pointer;
    display:inline-block;
    padding: 0 3px 2px 0;
}
.dropdown ul {
    background-color: #4F6877;
    border:0;
    color:#fff;
    display:none;
    left:0px;
    padding: 2px 15px 2px 5px;
    position:absolute;
    top:2px;
    width:280px;
    list-style:none;
    height: 100px;
    overflow: auto;
}
.dropdown span.value {
    display:none;
}
.dropdown ul li a {
    padding:5px;
    display:block;
}
.dropdown ul li a:hover {
    background-color:#fff;
}
.Col1,
.Col2{
    width:50%;
    float:left;
}

<强> JQUERY

$(".dropdown dt a").on('click', function () {
    $(".dropdown ul").slideToggle('fast');
});

$(".dropdown ul li a").on('click', function () {
    $(".dropdown ul").hide();
});

function getSelectedValue(id) {
    return $("#" + id).find("dt a span.value").html();
}

$(document).bind('click', function (e) {
    var $clicked = $(e.target);
    if (!$clicked.parents().hasClass("dropdown")) $(".dropdown ul").hide();
});

$('.mutliSelect input[type="checkbox"]').on('click', function () {

    var title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),
        title = $(this).val() + ",";

    if ($(this).is(':checked')) {
        var html = '<span title="' + title + '">' + title + '</span>';
        $('.multiSel').append(html);
        $(".hida").hide();
    } 
    else {
        $('span[title="' + title + '"]').remove();
        var ret = $(".hida");
        $('.dropdown dt a').append(ret);

    }
});

<强> CREDITS

@ElmahdiMahmoud for dropdown javascript