模拟下拉列表select 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>模拟下拉菜单</title>
    <style>
        * { margin: 0; padding: 0; }
        body { font: 14px '微软雅黑'; color: #555; padding:50px; }
        ul { list-style: none; }
        p { margin-bottom: 20px; }
        .model-select-box { width: 197px; height: 27px; line-height: 27px; border: 1px solid #aaa; float: left; margin-right: 20px; text-indent: 5px; position: relative; }
        .model-select-text { height: 27px; padding-right: 27px; background: url(http://www.w3cfuns.com/forum.php?mod=attachment&aid=MTUxOTJ8YjM1MDMzOGN8MTM5NDc3OTE5M3w1NDM4NzYzfDU1OTk1NjY%3D&nothumb=yes) no-repeat right 0; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; user-select: none; }
        .model-select-option { display: none; position: absolute; background: #fff; width: 100%; left: -1px; border: 1px solid #aaa; }
        .model-select-option li { height: 22px; line-height: 22px; color: #555; cursor: pointer; }
        .model-select-option li.seleced { background: #06C; color: #fff; }
    </style>
</head>

<body>
<p>模拟下拉菜单</p>
<div class="model-select-box">
    <div class="model-select-text" data-value="">广州-08</div>
    <ul class="model-select-option">
        <li data-option="1">上海-01</li>
        <li data-option="2">北京-02</li>
        <li data-option="3">沈阳-03</li>
        <li data-option="4">天津-04</li>
        <li data-option="5">武汉-05</li>
        <li data-option="6">成都-06</li>
        <li data-option="7">重庆-07</li>
        <li data-option="8" class="seleced">广州-08</li>
        <li data-option="9">拉萨-09</li>
        <li data-option="10">石家庄-10</li>
        <li data-option="11">乌鲁木齐-11</li>
        <li data-option="12">济南-12</li>
        <li data-option="13">哈尔滨-13</li>
        <li data-option="14">吉林-14</li>
    </ul>
    <input type="hidden" class="selected-input" data-value="" name="cityID" value=""/>
</div>
<div class="model-select-box">
    <div class="model-select-text" data-value="">北京-02</div>
    <ul class="model-select-option">
        <li data-option="1">上海-01</li>
        <li data-option="2" class="seleced">北京-02</li>
        <li data-option="3">沈阳-03</li>
        <li data-option="4">天津-04</li>
    </ul>
    <input type="hidden" class="selected-input" data-value="" name="cityID" value=""/>
</div>
<div class="model-select-box">
    <div class="model-select-text" data-value="">武汉-05</div>
    <ul class="model-select-option">
        <li data-option="1">上海-01</li>
        <li data-option="2">北京-02</li>
        <li data-option="3">沈阳-03</li>
        <li data-option="4">天津-04</li>
        <li data-option="5" class="seleced">武汉-05</li>
    </ul>
    <input type="hidden" class="selected-input" data-value="" name="cityID" value=""/>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
    /*
     * 模拟网页中所有的下拉列表select
     */
    function selectModel(){
        var $box = $('div.model-select-box');
        var $option = $('ul.model-select-option', $box);
        var $txt = $('div.model-select-text', $box);
        var speed = 10;
        /*
         * 当机某个下拉列表时，显示当前下拉列表的下拉列表框
         * 并隐藏页面中其他下拉列表
         */
        $txt.click(function(e) {
            var  $current = $(this).siblings('ul.model-select-option');
            //隐藏其它下拉
            $option.not($current).slideUp(speed, function(){
                int($(this));
            });
            //显示当前下拉
            $current.slideToggle(speed, function(){
                int($(this));
            });
            return false;
        });
        //点击选择，关闭其他下拉
        /*
         * 为每个下拉列表框中的选项设置默认选中标识 data-selected
         * 点击下拉列表框中的选项时，将选项的 data-option 属性的属性值赋给下拉列表的 data-value 属性，并改变默认选中标识 data-selected
         * 为选项添加 mouseover 事件
         */
        $option.find('li')
                //初始化选中项 data-selected,selected-input默认值
                .each(function(index, element) {
                    if($(this).hasClass('seleced')){
                        $(this).addClass('data-selected');
                        $(this).parent().siblings($('input.selected-input')).attr('data-value',$(this).attr('data-option'));
                    }
                })
                .mousedown(function(){
                    //赋值操作
                    $(this).parent().siblings('div.model-select-text').text($(this).text())
                            .attr('data-value', $(this).attr('data-option'));
                    $(this).parent().siblings($('input.selected-input')).attr('data-value',$(this).attr('data-option'));

                    //标识选中项
                    $(this).addClass('seleced data-selected').siblings('li').removeClass('seleced data-selected');

                    //隐藏所有下拉框
                    $option.slideUp(speed, function(){
                        //int($(this));
                    });

                    return false;
                })
                .mouseover(function(){
                    $(this).addClass('seleced').siblings('li').removeClass('seleced');
                });
        //点击文档，隐藏所有下拉
        $(document).click(function(e) {
            $option.slideUp(speed, function(){
                int($(this));
            });
        });
        //初始化默认选择
        function int(obj){
            obj.find('li.data-selected').addClass('seleced').siblings('li').removeClass('seleced');
        }
    }
    $(function(){
        selectModel();
    })
</script>
</body>
</html>

 

posted on 2015-10-07 23:06  chengyanfen  阅读(1246)  评论(0)  编辑  收藏  举报

导航