<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        body,ul,li{ margin:0; padding:0; font-size:13px;}

        ul,li{list-style:none;}

        .div-select{position:relative; }

        .div-select cite{width:150px; height:24px;line-height:24px; display:block; color:#807a62; cursor:pointer;font-style:normal;

            padding-left:4px; padding-right:30px; border:1px solid #333333;

            background:url(xjt.png) no-repeat right center;}

        .div-select ul{width:184px;border:1px solid #333333; background-color:#fff; position:absolute; z-index:10; margin-top:-1px; display:none;}

        .div-select li{height:24px; line-height:24px;}

        .div-select li a{display:block; height:24px; color:#333333; text-decoration:none; padding-left:10px; padding-right:10px;}

        .div-select li a:hover{background-color:#CCC;}

    </style>

    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>

    <script type="text/javascript">

        //改写div模拟下拉菜单jquery插件 基本结构微动， id改成类名，原主方法不懂只是改写下

        $.fn.divSelect = function(){

            return this.each(function(index){

                var $this = $(this),

                        $cite = $this.find("cite"),

                        $list = $this.find("ul"),

                        $input = $this.find(".div-input");

                $this.on("click","cite",function(){

                    $list.is(":hidden") ? $list.slideDown("fast") : $list.slideUp("fast");

                    return false

                });

                $list.on("click","a",function(){

                    var $this = $(this);

                    $cite.text($this.text());

                    $input.val($this.attr("selectid"));

                    $list.hide();

                    return false

                });

                $(document).on("click.select"+index,function(){

                    $list.hide();

                });

            })

        };

        $(function(){

//调用 支持jquery连缀语法

            $(".div-select").divSelect();

        });

    </script>

</head>

<body style="padding: 50px;">

<form action="" method="post">

    <div class="div-select">

        <cite>请选择特效分类1</cite>

        <ul>

            <li><a href="javascript:;" selectid="1">导航菜单1</a></li>

            <li><a href="javascript:;" selectid="2">焦点幻灯片1</a></li>

            <li><a href="javascript:;" selectid="3">广告代码1</a></li>

            <li><a href="javascript:;" selectid="4">网页特效1</a></li>

            <li><a href="javascript:;" selectid="5">jquery 特效1</a></li>

        </ul>

        <input name="" type="hidden" value="" class="div-input"/>

    </div>

    <br/><br/>

    <div class="div-select">

        <cite>请选择特效分类2</cite>

        <ul>

            <li><a href="javascript:;" selectid="1">导航菜单2</a></li>

            <li><a href="javascript:;" selectid="2">焦点幻灯片2</a></li>

            <li><a href="javascript:;" selectid="3">广告代码2</a></li>

            <li><a href="javascript:;" selectid="4">网页特效2</a></li>

            <li><a href="javascript:;" selectid="5">jquery 特效</a></li>

        </ul>

        <input name="" type="hidden" value="" class="div-input"/>

    </div>

</form>

</body>

</html>

select下拉框插件（转）的更多相关文章

  1. select下拉框插件jquery.editable-select

    项目中有个需求,下拉框既可以下拉选择,也可以手动填写 html代码 <span>数据来源</span> </select> js代码 $('#noMean').ed ...

  2. 非常实用的select下拉框-Select2.js

    在Web开发中,Select下拉框是常用的输入组件.由于原生的Select几乎很难通过CSS样式控制.一些好看的Select下拉框就只能通过模拟来实现.PHP程序员雷雪松给大家推荐一筐款不错的Sele ...

  3. jquery Combo Select 下拉框可选可输入插件

    Combo Select 是一款友好的 jQuery 下拉框插件,在 PC 浏览器上它能模拟一个简单漂亮的下拉框,在 iPad 等移动设备上又能回退到原生样式.Combo Select 能够对选项进行 ...

  4. jQuery插件实现select下拉框左右选择_交换内容（multiselect2side）

    效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  5. 基于jQuery select下拉框美化插件

    分享一款基于jQuery select下拉框美化插件.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下 ...

  6. 自定义样式的select下拉框深入探索

    第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...

  7. jQuery自定义漂亮的下拉框插件8种效果演示

    原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en&q ...

  8. jQuery下拉框插件8种效果

    jQuery自定义漂亮的下拉框插件8种效果 jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览 <body class=" ...

  9. jQuery无限级联下拉框插件

    自己编写jQuery插件 之 无限级联下拉框   因为是级联,所以数据必须是树型结构的,我这里的测试数据如下: 看下效果图: 1.>图一: 2.>图二: 3.>图三: 由图可知,下拉 ...

随机推荐

  1. Ubuntu/linux 有关权限修改的命令

    chmod更改文件权限命令 最常用的基础命令chmod chmod 777  目录名(路径名) 777 三位数字分别代表 user.group.others 的权限,可读(r).可写(w).可执行(x ...

  2. 使用自定义签名的https的ssl安全问题解决和metro的webservice调用

    最近一直在忙新的项目,每天加班到8点多,都没来写博客了.新的项目遇到了很多问题,现在趁着突然停电来记录下调用https的问题吧. 我们服务主要是,我们调用数据源数据,并且再提供接口供外部数据调用. 我 ...

  3. swif解决手势冲突

    有时候我们在一个大的透明view上添加一个小的view,需要点击透明view时remove掉,但是我们不希望触碰到小的view上也remove就需要实现 UIGestureRecognizerDele ...

  4. python opencv 利用Lab空间把春天的场景改为秋天

    前一段时间实现了Reinhard颜色迁移算法,感觉挺有意思的,然后在代码上随意做了一些更改,有了一些发现,把Lab通道的a通道值改为127左右,可以将绿色改为黄色,而对其他颜色的改动非常小,因此可以将 ...

  5. 微信H5页面内实现一键关注公众号

    H5页面内实现关注公众号的微信JSSDK没有相关接口开放,因此就得动点脑筋来实现该功能了.下面的方法就是通过一种非常蹊跷的方式实现的. 首先,需要在公众号内发表一篇原创文章,注意是原创文章,然后由另一 ...

  6. CSS零基础学习笔记.

    酸菜记 之 CSS的零基础. 这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教, 学前了解: CSS中字母是不分大小写的; CSS文件可以使用在各种程序文件中(如:PH ...

  7. org.hibernate.AssertionFailure:collection[......] was not processed by flush()

    八月 12, 2016 11:00:49 上午 org.apache.catalina.core.StandardWrapperValve invoke 严重: Servlet.service() f ...

  8. sql中批量删除带有外键的所有表

    1首先删除所有的外检约束 --删除所有外键约束 DECLARE c1 cursor forselect 'alter table ['+ object_name(parent_obj) + '] dr ...

  9. 关于Android中ArrayMap/SparseArray比HashMap性能好的深入研究

    由于网上有朋友对于这个问题已经有了很详细的研究,所以我就不班门弄斧了: 转载于:http://android-performance.com/android/2014/02/10/android-sp ...

  10. Android动态方式破解apk终极篇(加固apk破解方式)

    一.前言 今天总算迎来了破解系列的最后一篇文章了,之前的两篇文章分别为: 第一篇:如何使用Eclipse动态调试smali源码 第二篇:如何使用IDA动态调试SO文件 现在要说的就是最后一篇了,如何应 ...