模拟 SELECT 插件(Jquery)
支持 select change() 事件;
Dropdown 插件代码
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * *
*
* 模块：Jquery 插件
*
* 功能：模拟 Select 成 Combox dropdown
*
* 作者：cnzn chen
* 编写时间：2015-12-29
* 最后修改
*
* * * * * * * * * * * * * * * * * * * * * * * * * * * * */
(function($) {
$.fn.dropdown = function(options) {
options = options || {};
options.item_height = options.item_height || 28;
options.max_row = options.max_row || 10;
this.each(function(index, ele){
$.dropdown( $(this), options, index );
});
};
// 开始执行
$.dropdown = function( obj, options, index) {
// 创建 与 设置对象
var $_parant = obj.parent();
var Obj_name = $(obj).attr('name');
var $this = obj;
var $this_id = $this.attr('id');
var $item_height_css = "style=\"height:" + options.item_height + 'px; line-height:' + options.item_height + 'px;"';
var max_len = options.item_height * options.max_row; // 设置最大显示项(高度)
var $dropbox, $input, $dropObject, $attachObject, $hide_input;
$dropbox = $_parant.find('.cz-dropbox');
if( $dropbox.length > 0 ) {
$input = $dropbox.find('.cz-dropbox-caption');
$dropObject = $dropbox.find('.cz-icon-dropdown');
$attachObject = $dropbox.find('.cz-droplist');
$hide_input = $dropbox.find('.cz-dropbox-input');
// 解绑事件(防止多次绑定)
$dropbox.unbind();
$input.unbind();
$dropObject.unbind();
}
else {
$dropbox = $('<div class="cz-dropbox" tabindex="'+ index +'"></div');
//$dropbox = $('<div class="cz-dropbox"></div');
$input = $('<span class="cz-dropbox-caption"></span>');
$dropObject = $('<div class="cz-icon-dropdown"></div>');
$attachObject = $('<div class="cz-droplist"></div>');
$hide_input = $('<input class="cz-dropbox-input" type="hidden" name="" value="">');
$dropbox.append( $input );
$dropbox.append( $dropObject );
$dropbox.append( $attachObject );
$dropbox.append( $hide_input );
$_parant.append( $dropbox );
// 设置 Input name
$hide_input.attr( 'name', $this.attr('name') );
$this.attr('name', ':'+$this.attr('name') );
$this.hide();
$(document).click(function(e){
$attachObject.hide();
});
}
if( $attachObject.html() == '' ) {
$attachObject.html('<ul></ul>');
}
// 设置默认值
$this_selected = $this.find("option:selected");
if( $this_selected.length > 0 )
{
$input.text( $this.find("option:selected").text() );
$hide_input.val( $this.find("option:selected").val() );
}
// 读取 select 列表中的 数据, 并入 options_data 数组内
var options_data = new Array();
$this.children('option').each(function() {
var item_array = new Array();
item_array[0] = $(this).val();
item_array[1] = $(this).text();
options_data.push( item_array );
});
// 初始化 列表的位置与高宽
setDropListArea( options_data.length );
// 下拉块：单击事件，控制列表框的显示状态
$dropObject.click( function(event) {
event.stopPropagation();
if ( !$attachObject.is(':visible') ) {
display_all_item();
}
else {
$attachObject.hide();
}
});
// 说明：输入对象 单击 事件
$input.click( function(event) {
event.stopPropagation();
if ( !$attachObject.is(':visible') ) // 列表不显示时
{
display_all_item();
}
else {
$attachObject.hide();
}
});
// 输入对象失去焦点事件
$dropbox.blur(function() {
if( $attachObject.is(":visible") ) {
setTimeout(function() { $attachObject.hide() }, 100);
}
});
// 显示所有数据(一般点下拉对象才显示)
function display_all_item() {
var html ='';
for( var i in options_data ) {
html += "<li data=\"" + options_data[i][0] + "\" title=\"" + options_data[i][1] + "\"" + $item_height_css + ">" + options_data[i][1] + "</li>";
}
$attachObject.find("ul").html( html );
// 设置子元素 click 与 hover 事件
$attachObject.children("ul").children("li").click( function() {
set_input_value( $(this).text(), $(this).attr('data') );
});
$attachObject.show();
$attachObject.scrollTop( 0 ); // 移到顶上
}
// 设置选择项的值与显示
function set_input_value($sel_text, $sel_value) {
var default_val = $hide_input.val();
$input.text($sel_text);
$hide_input.val($sel_value);
$attachObject.hide();
if( default_val != $sel_value )
{
$this.find("option[value='"+$sel_value+"']").attr("selected",true);
$this.trigger("change"); // 如果不手动，将不能触发 change 事件
}
}
// 设置列表框的长度 /* 自动的话，如果数据量过大，显示效果太差 */
function setDropListArea( row_count ) {
var ul_height = row_count * options.item_height;
$attachObject.width( $input.outerWidth(true) );
if( ul_height <= max_len ) {
$attachObject.height( ul_height );
}
else {
$attachObject.height( max_len );
}
$attachObject.css('top', $dropbox.height() + 1 );
}
}
})(jQuery);
Dropdown的 css
.cz-dropbox {
position: relative;
font: 12px/1.5 tahoma,arial,"宋体",sans-serif;
background: #fff; outline: none;
border: 1px solid #a0a0a0;
}
.cz-dropbox .cz-dropbox-caption {
display: inline-block;
width:188px; height: 28px; line-height: 28px;
padding: 0px 5px; cursor: default;
font-family: 'tahoma','arial',"宋体",'sans-serif';
}
.cz-dropbox .cz-icon-dropdown {
background: url("./images/drop_icon.png") no-repeat scroll left center;
height: 28px; padding: 1px;
width: 15px; position: absolute; top: 0; right: 0px;
}
.cz-dropbox .cz-droplist {
line-height: 25px; border: 1px solid #a0a0a0; border-top:0px; width:240px; display:none;
overflow-y:auto; background:#fff; position:absolute; _top: 0px; z-index: 100; left: -1px;
box-shadow: 0 0 6px 0 #dfdfdf;
}
.cz-dropbox .cz-droplist ul {
PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; margin: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; LIST-STYLE-IMAGE: none; PADDING-TOP: 0px;
}
.cz-dropbox .cz-droplist li {
margin: 0; padding: 0;
height: 25px; line-height: 25px; display: block; CURSOR: pointer; float:none;
margin-bottom: 0px; padding-left: 5px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
color: #4f4f4f;
}
.cz-dropbox .cz-droplist li:hover {
background:#c8e3fc; color:#000;
}HTML 页面代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>模拟 select </title>
<meta content=IE=Edge http-equiv=X-UA-Compatible>
<link rel=stylesheet type=text/css href='dropdown.css'>
<script type='text/javascript' src='/js/jquery.min.js'></script>
<script type="text/javascript" src="dropdown.js"></script>
<style type="text/css">
* {
PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; margin: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; LIST-STYLE-IMAGE: none; PADDING-TOP: 0px
}
.test_ul li {
margin-top: 30px; padding-left: 20px; float: left;
}
</style>
</head>
<body >
<ul class="test_ul">
<li>
<select name="bb" class="auto_value" id="prov">
<option value="" >---选择省份---</option>
</select>
</li>
<li>
<select name="cc" class="auto_value" id="city">
<option value="" >---选择城市---</option>
</select>
</li>
<script type="text/javascript">
<!--
// 就前两个省份配对的城市数据，后面的都没有，只做测试使用
var city = [
['650000', '新疆', '1'],
['330000', '浙江', '1'],
['430000', '湖南', '1'],
['320000', '江苏', '1'],
['360000', '江西', '1'],
['220000', '吉林', '1']
];
var t=[
['650100','乌鲁木齐','650000','0'],
['650200','克拉玛依','650000','0'],
['652100','吐鲁番','650000','0'],
['652200','哈密','650000','0'],
['652300','昌吉','650000','0'],
['652700','博尔塔拉','650000','0'],
['652800','巴音郭楞','650000','0'],
['652900','阿克苏','650000','0'],
['653000','克孜勒苏柯尔克孜','650000','0'],
['653100','喀什','650000','0'],
['653200','和田','650000','0'],
['654000','伊犁','650000','0'],
['654200','塔城','650000','0'],
['654300','阿勒泰','650000','0'],
['659001','石河子','650000','0'],
['659002','阿拉尔','650000','0'],
['659003','图木舒克','650000','0'],
['659004','五家渠','650000','0'],
['330100','杭州','330000','0'],
['330200','宁波','330000','0'],
['330300','温州','330000','0'],
['330400','嘉兴','330000','0'],
['330500','湖州','330000','0'],
['330600','绍兴','330000','0'],
['330700','金华','330000','0'],
['330800','衢州','330000','0'],
['330900','舟山','330000','0'],
['331000','台州','330000','0'],
['331100','丽水','330000','0']
]
$(document).ready(function(){
// 设置下拉插件的参数
var dropdown_item_data = {item_height:28, max_row:8};
// 定义对象
var $prov = $('#prov'), $city = $('#city');
// 取得第一子项，并转化成 HTML 字符
var $sel_first_option = $city.children('option').eq(0);
var sel_first_html = '';
if( $sel_first_option.length > 0 )
{
sel_first_html = $sel_first_option[0].outerHTML;
}
// 加载省份
for(x in city )
{
$prov.append('<option value="'+city[x][0]+'">'+city[x][1]+'</option>');
}
// 省份变化时，更新城市列表
$prov.change(function() {
$city.html('');
if( sel_first_html != '' ) {
$city.append(sel_first_html);
}
var prov_id = $prov.find("option:selected").val();
for(x in t )
{
if( prov_id == t[x][2] )
{
$city.append('<option value="'+t[x][0]+'">'+t[x][1]+'</option>');
}
}
$city.dropdown( dropdown_item_data );
});
$('.auto_value').dropdown( dropdown_item_data );
});
//-->
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
