html下拉框控件。选中待选项时，触发对应的select的change事件。主要参考 [Utom](http://utombox.com/)的Select to CSS，改为用jquery实现。

hhSelect.js

var HhSelect = {
    init: function ($selects) {
        $selects.each(function () {
            HhSelect._initSelect($(this));
        });
        // 点击页面任何地方，收起下拉框
        $(function () {
            $('body').click(function () {
                $('div.tag_select_open').attr('class', 'tag_select');
                $('ul.tag_options').hide();
            });
        });
    },
    _initSelect: function ($sel) {
        // 隐藏select
        $sel.hide();
        // 构造下拉框
        var selName = $sel.attr('name');
        if (!selName) alert('DEBUG: select需要提供name');

        var $container = $('#select_' + selName);
        var $lbl = $('#select_info_' + selName);
        var $list = $('#options_' + selName);

        if ($container.length) {
            $list.empty();
        } else {
            $container = $('<div>').attr({
                id: 'select_' + selName,
                'class': 'select_box'
            });
            // 构造一个区域，作为下拉框的选中项的容器
            $lbl = $('<div>').attr({
                id: 'select_info_' + selName,
                'class': 'tag_select'
            }).css('cursor', 'pointer').mouseover(function () {
                if ($(this).attr('class') == 'tag_select') {
                    $(this).attr('class', 'tag_select_hover');
                }
            }).mouseout(function () {
                if ($(this).attr('class') == 'tag_select_hover') {
                    $(this).attr('class', 'tag_select');
                }
            });
            $container.append($lbl).click(function (event) {
                event.stopPropagation();
            });

            // 构造一个区域，作为可选项的容器
            $list = $('<ul>').attr({
                id: 'options_' + selName,
                'class': 'tag_options'
            }).css({
                position: 'absolute',
                display: 'none',
                zIndex: '999'
            });

            $lbl.click(function () {
                $('ul.tag_options').hide();
                // 展开
                if ($lbl.attr('class') == 'tag_select_hover') {
                    $lbl.attr('class', 'tag_select_open');
                    $list.show();
                } // 折叠
                else if ($lbl.attr('class') == 'tag_select_open') {
                    $lbl.attr('class', 'tag_select_hover');
                    $list.hide();
                }
            });

            $container.append($list);
            // 在select前放置下拉框
            $sel.before($container);
        }

        // 填充可选项
        $sel.find('option').each(function () {
            var $option = $(this);
            var isSelected = $option.attr('selected');
            var $opt = $('<li>').attr({
                id: isSelected ? 'selected_' + selName : '',
                'class': isSelected ? 'open_selected' : 'open'
            }).css({
                cursor: 'pointer'
            }).text($option.text()).mouseover(function () {
                $(this).attr('class', 'open_hover');
            }).mouseout(function () {
                $(this).attr('class', isSelected ? 'open_selected' : 'open');
            }).click(function () {
                $(this).attr({
                    'class': 'open_hover',
                    id: 'selected_' + name
                });
                $(this).siblings().attr({
                    'class': 'open',
                    id: ''
                });
                $list.hide();
                $lbl.text($(this).text()).attr('class', 'tag_select');
                $option.attr('selected', 'selected');
                // !Note
                $sel.change();
            });

            if (isSelected) {
                // 同步修改下拉框选中项的内容
                $lbl.text($option.text());
            }

            $list.append($opt);
        });
    }
};

sample.js

$(function () {
    HhSelect.init($('select'));
    
    var cityCode = $.cookie('DepartureCityCode') || 'BJS';
    if (cityCode) {
        // 重绘下拉框
        HhSelect.init($('#ddlDeparturePlace').val(cityCode));
    }
    
    $('#ddlDeparturePlace').change(function(){
        HhSelect.init($(this));
        // 如果选中台北，则直接跳转至繁体站
        var cityCode = $(this).val();
        if (cityCode == 'TPE') {
            location.href = "http://tb.hhtravel.com";
        }
    });

});