如何創建具有複選框的選擇框

Question

我想實現一個選擇框，其中包含一些複選框，如下圖所示。當我在選擇框中點擊打開它存在於其他分區我已經使用z-index的，但它不工作 它看起來像這樣

<form> 
    <div class="multiselect"> 
     <div class="selectBox" onclick="showCheckboxes()"> 
      <select> 
       <option>Select an option</option> 
      </select> 
      <div class="overSelect"></div> 
     </div> 
     <div id="checkboxes"> 
      <label for="one"><input type="checkbox" id="one"/>First checkbox</label> 
      <label for="two"><input type="checkbox" id="two"/>Second checkbox </label> 
      <label for="three"><input type="checkbox" id="three"/>Third checkbox</label> 
     </div> 
    </div> 
    </form> 
<div class="styled-select slate"> 
<select> 
<option>Here is the first option</option> 
<option>The second option</option> 
<option>The third option</option> 
</select> 
</div> 

這是CSS的複選框： -

<style> 
    .multiselect { 
    width: 200px; 
    height: 20px; 
} 
.selectBox { 
    position: relative; 
} 
.selectBox select { 
    width: 100%; 
    font-weight: bold; 
} 
.overSelect { 
    position: absolute; 
    left: 0; right: 0; top: 0; bottom: 0; 
} 
#checkboxes { 
    display: none; 
    border: 1px #dadada solid; 
} 
#checkboxes label { 
    display: block; 
} 
#checkboxes label:hover { 
    background-color: #1e90ff; 
} 




.styled-select { 
    background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0; 
    height: 29px; 
    overflow: hidden; 
    width: 240px; 
    } 

    .styled-select select { 
    background: transparent; 
    border: none; 
    font-size: 14px; 
    height: 29px; 
    padding: 5px; /* If you add too much padding here, the options won't show in IE */ 
    width: 268px; 
} 
    .styled-select.slate 
{ 
    background: url(http://i62.tinypic.com/2e3ybe1.jpg) no-repeat right center; 
    height: 34px; 
     width: 240px; 
    } 

    .styled-select.slate select { 
    border: 1px solid #ccc; 
    font-size: 16px; 
    height: 34px; 
    width: 268px; 
    } 

Answer 1

@Sheraz，而不是修改你的代碼只需用下面的工作代碼更新：

HTML

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

<dd> 
    <div class="mutliSelect"> 
     <ul> 
      <li> 
       <input type="checkbox" value="Apple" />Apple</li> 
      <li> 
       <input type="checkbox" value="Blackberry" />Blackberry</li> 
      <li> 
       <input type="checkbox" value="HTC" />HTC</li> 
      <li> 
       <input type="checkbox" value="Sony Ericson" />Sony Ericson</li> 
      <li> 
       <input type="checkbox" value="Motorola" />Motorola</li> 
      <li> 
       <input type="checkbox" value="Nokia" />Nokia</li> 
     </ul> 
    </div> 
</dd> 
<button>Filter</button> 
</dl> 

CSS

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

    .dropdown { 
    position: absolute; 
    top:50%; 
    transform: translateY(-50%); 
    } 

a { 
    color: #fff; 
} 

.dropdown dd, 
.dropdown dt { 
    margin: 0px; 
    padding: 0px; 
} 

.dropdown ul { 
    margin: -1px 0 0 0; 
} 

.dropdown dd { 
    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 dd 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 dd ul li a { 
    padding: 5px; 
    display: block; 
} 

.dropdown dd ul li a:hover { 
    background-color: #fff; 
} 

button { 
    background-color: #6BBE92; 
    width: 302px; 
    border: 0; 
    padding: 10px 0; 
    margin: 5px 0; 
    text-align: center; 
    color: #fff; 
    font-weight: bold; 
} 

JS

/* 
    Dropdown with Multiple checkbox select with jQuery - May 27, 2013 
    (c) 2013 @ElmahdiMahmoud 
    license: http://www.opensource.org/licenses/mit-license.php 
*/ 

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

$(".dropdown dd ul li a").on('click', function() { 
    $(".dropdown dd 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 dd 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); 

    } 
}); 


http://codepen.io/elmahdim/pen/hlmri 

希望幫助，祝你好運。

Answer 2

@Sheraj使用這個插件從jQuery的.. http://www.jqueryscript.net/demo/jQuery-Plugin-For-Multi-Select-List-with-Checkboxes-MultiSelect/