<!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. response.write();改变页面布局的原因及解法

    Response.Write ,在ASP.NET 中不要随便使用 Response.Write,其原因是它会打乱 ASP.NET 的输出流顺序,在aspx.cs 中使用 Response.Write ...

  2. Html5的表单

    跨浏览器 https://github.com/westonruter/webforms2 https://github.com/Modernizr/Modernizr http://www.blog ...

  3. SQL2008完全卸载详解（图解）

    一．    SQL2008卸载. 1.从控制面板卸载 1)点击计算机右下角“开始”,点击“控制面板”

  4. MyBatis传入参数为集合、数组SQL写法

    参考:http://blog.csdn.net/small____fish/article/details/8029030 foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合 ...

  5. android eclipse 导入idea项目

    将以下代码复制到.project中 <?xml version="1.0" encoding="UTF-8"?> <projectDescri ...

  6. 修改bootstrap modal模态框的宽度

    原文链接:http://blog.csdn.net/wuhawang/article/details/52252912 修改模态框的宽度很简单,修改width属性就可以了 但是要注意的一点是,修改的不 ...

  7. linux 调用java main方法

    #!/bin/shexport LANG=zh_CNtimestamp=`date +%Y%m%d%H%M`/opt/java6/bin/java -Xms128m -Xmx512m -Dfile.e ...

  8. 类传奇手游简单Demo

    这是一年多前自己闲时以Unity2D制作的很粗糙简单的传奇类手游Demo(单机),已很久未作继续开发. 此小Demo初步完成或实现了如下功能(有诸多考虑欠妥甚至不完善之处): 1).图片资源打包方式. ...

  9. 22-React JSX语法

    React JSX语法 JSX只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,当然你想直接使用纯Javascript代码写也是可以的,只是利用JSX,组件的结构和 ...

  10. Spring MVC之@RequestBody, @ResponseBody 详解

    http://blog.csdn.net/kobejayandy/article/details/12690555