模拟 SELECT

模拟 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>