模拟html的select控件

fyrlovezzp

2013-05-30

demo 地址： http://dailylist.sinaapp.com/html_select/demo.html

github ：https://github.com/wangshaofei/html_select

html代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="html_select.css" />
    <title>test html select in jquery extends</title>
</head>
<body>
    <h2>模拟传统的html的select控件</h2>
    <div>
        <dl>
            <dt>1、重新定义select控件 和下拉框的样式，跨浏览器样式不变。</dt>
                <dd> chrome firefox ie8</dd>
            <dt>2、提交表单时还是提交的select的值。</dt>
            <dt>3、使用简单。</dt>
            <dd><pre>$('#select的id').dropDown({
                'class' : 自定义的样式的class，
                'callback' : 回调函数
            })</pre><dd>
        </dl>

    </div>
	<div class="wrapdiv">
        <table>
            <tr>
                <td>年龄：</td>
                <td>
                    <select id="age" class="select input_text_city input_text">
                         
                    </select>岁
                </td>
            </tr><tr>
                <td>身高：</td>
                <td>
                   <select id="height" class="select input_text_city input_text">
                        
                    </select>cm                    

                </td>
            </tr>
        </table>
        

		
	</div>
    <div style="clear:both;"></div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript" src="html_select.js"></script>
	<script type="text/javascript">
     
     $(function(){
        
        // 填出年龄下拉框的值
        for (var i = 24; i < 72; i++) {
            var o = $('<option>');
            o.attr('value',i).text(i).appendTo($('#age'));
        };
         // 填出身高下拉框的值
        for (var i = 160; i < 190; i++) {
            var o = $('<option>');
            o.attr('value',i).text(i).appendTo($('#height'));
        };

        // 应用dropDown插件
     	$('#age').dropDown({
            'class' : 'age',   // 添加自定义样式
            'callback' : function(){   // 添加回调函数
                alert($(this).val());
            }
        });
     	$('#height').dropDown({
            'class' : 'height',
            'callback' : function(){
                alert($(this).val());
            }
        });
     })
	</script>
</body>
</html>

js代码

/**
 *  一个jquery的拓展。
 *  这个拓展是用来需要美化html的select控件的html页面。
 *     原理：1、用css将select的样式写好（定义class），
 *           2、影藏select
 *           3、创建div作为select的选择框并赋予select的样式，创建ul作为下拉框
 *           4、添加事件
 *           5、修改成需要的样式。
 *     使用方法：
 *           1、$('#select的id').dropDown({
 *                  'class' : 添加的class名称,
 *                  'callback' : 毁掉函数,
 *               })。
 */

//应用严格模式
'use strict';

// 添加jquery拓展
$.fn.extend({
    // dropDown 方法
    'dropDown': function(config) {
        // src select控件对象
        var src = $(this);
        src.hide();
        
        // 创建新的选择框
        var d = $('<div>');
        d.attr('id', 'dropDown_' + src.attr('id'));
        d.addClass($(src).attr('class'));
        
        
        // 设置默认值
        d.text(src.find('option[value=' + src.val() + ']').text() !== '' ? src.find('option[value=' + src.val() + ']').text() : '请选择');
        d.css({
            'display': 'inline-block',
            'cursor': 'pointer',
            'line-height': src.height() + 'px',
            'text-align': 'center',
            'width': 'auto',
            'padding': '0 30px 0 20px'
        });
        
        // 点击事件
        d.click(function(e) {
            // 防止事件穿透
            var e = e || window.event;
            e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
            // 隐藏其他select的下拉框
            hideAll();
            // 获得option
            var os = $('#' + src.attr('id')).find('option');
            // 如果option为空就返回
            if (os.length <= 0) return false;
            // 创建下拉框
            var div = $('<div/>');
            var div2 = $('<div/>');
            div2.addClass('clearfix');
            div.addClass('div_model');
            if(config && config['class']){
                div.addClass(config['class']);
            }            
            var ul = $('<ul/>');
            for (var i = 0; i < os.length; i++) {
                var li = $('<li/>');
                li.text($(os[i]).text());
                li.attr('value', $(os[i]).val());
                li.click(function(e) {
                    var e = e || window.event;
                    e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
                    d.text($(this).text());
                    // 赋值原select控件
                    src.val($(this).attr('value'));
                    hideAll();
                    if (config &&　config.callback) {
                        // 绑定回调函数
                        config.callback.call(src);
                    }
                });

                ul.append(li);
            }
            ul.appendTo(div2);
             div2.appendTo(div)
            // 弹出框定位
            div.css({
                'top': e.pageY,
                'left': e.pageX
            });
            div.appendTo($('body'));
        });

        src.after(d);

        $('body').click(function() {
            $('.div_model').remove();
        });

        function hideAll() {
            $('.div_model').remove();
        }
    }
});

css代码

ul,li{margin: 0px; padding: 0px;}
.hide{display: none;}
.wrapdiv {height:500px;width:300px; padding: 20px;  border: 1px solid black;}  
.div_model {position: absolute; border: 1px solid #ccc; padding: 5px; background: white;width: 300px;height: 200px;overflow: auto;}    
.div_model ul ,.div_model ul li {list-style: none; margin: 0; padding: 0;}    
.div_model ul li{float: left;padding: 1px 5px;margin: 1px; cursor: pointer;}  
.div_model ul li:hover{background: red; color: white;}  
.input_text_city {width:86px; margin-right:12px;}  
.select{background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAGCAMAAAArBzSwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTQzMzEyNjVDMjhGMTFFMkIxQjBFN0MyOTMyNTYzN0UiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTQzMzEyNjZDMjhGMTFFMkIxQjBFN0MyOTMyNTYzN0UiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1NDMzMTI2M0MyOEYxMUUyQjFCMEU3QzI5MzI1NjM3RSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1NDMzMTI2NEMyOEYxMUUyQjFCMEU3QzI5MzI1NjM3RSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pgh6wScAAABFUExURXZ1c9bW1oqKirGvsPHx8Wtpar6+vq+vr4SEhHRzcfX08/7+/qinpdPS0I6Ni+Lh4Gtra2xqa/39/WxraWtqaP///////7wS/CgAAAAXdFJOU/////////////////////////////8A5kDmXgAAAEJJREFUeNosyFkCgCAMA1HcdwWS5v5HtWjn703qcikkkBeTl2yYQJB91WcdtxPbaGHtycf1s9ke8Aw2y+a1BvUKMAArlgaEjk4vogAAAABJRU5ErkJggg==) no-repeat right center;}  
.input_text{border:1px solid #cccccc;height:32px;width:190px;}  

/* 清楚浮动 */
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }  
.clearfix { display: inline-block; }   
html[xmlns] .clearfix { display: block; }  
* html .clearfix { height: 1%; }  

/* 年龄 */
.div_model.age {border-radius: 10px; padding: 10px;width: 297px;height: 178px;height: 180px\9;}
.div_model.age div {border-top: 1px #ccc solid;border-left: 1px #ccc solid;}
.div_model.age li {border-right:1px #ccc solid; border-bottom: 1px solid #ccc;padding: 5px 10px;margin: 0px;}

/* 身高 */
.div_model.height {border-radius: 10px; padding: 10px;width: 226px;height: 178px;height: 180px\9;}
.div_model.height div {border-top: 1px #ccc solid;border-left: 1px #ccc solid;}
.div_model.height li {border-right:1px #ccc solid; border-bottom: 1px solid #ccc;padding: 5px 10px;margin: 0px;}

select html代码