php 下拉式多选框样式,jQuery模拟html下拉多选框的原生实现方法示例

本文实例讲述了jQuery模拟html下拉多选框的原生实现方法。分享给大家供大家参考，具体如下：

用js, html, css 简单的实现一个HTML 下拉多选框，不试用其他框架的情况下，可以借鉴一下，如果用jqueryUI, BOOTSTRAP, 就没必要参考了。毕竟那些现成的东西更好用。

www.jb51.net jQuery模拟select

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 5px 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: 240px;

list-style: none;

height: auto;

overflow: auto;

margin-top:30px;

}

.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;

}

sss

• Apple

• Blackberry

• HTC

• Sony Ericson

• Motorola

• Nokia

$(".dropdown dt .mydropdown").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 = '' + title + '';

$('.multiSel').append(html);

} else {

$('span[title="' + title + '"]').remove();

}

});

运行效果：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。