<!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. 捷波朗 jabra BT3030 蓝牙耳机

    蓝牙版本V2.0 通话时间 8小时 按键说明:轻敲 快按轻敲两下 在1.5秒内快速按两下按 大约 1秒钟按住 大约 4秒钟 充电提示绿灯闪亮 正在充电持续绿灯 已完全充满电 检查电量按 音量上调(+) ...

  2. SQL常用语句整理

    有次笔试最后一页的三个数据库连接查询,没有写出来,被考官暗讽了下.现在想来,实习初,确实很LOW.现公司刚入职的时候,负责过ETL方面,所以和数据库打了不少交道,五十行的联合查询.上百行的存储过程很常 ...

  3. Raytracer

    http://www.cnblogs.com/miloyip/archive/2010/03/29/1698953.html http://www.scratchapixel.com/lessons/ ...

  4. Cocos2dx3.11.1Android播放视频，后台 黑屏，无法记忆播放bug修改

    /* * Copyright (C) 2006 The Android Open Source Project * Copyright (c) 2014 Chukong Technologies In ...

  5. easyui DataGrid 工具类之 util js

    var jq;                var tab;                var tabsIndex;                                /**     ...

  6. [DL学习笔记]从人工神经网络到卷积神经网络_1_神经网络和BP算法

    前言:这只是我的一个学习笔记,里边肯定有不少错误,还希望有大神能帮帮找找,由于是从小白的视角来看问题的,所以对于初学者或多或少会有点帮助吧. 1:人工全连接神经网络和BP算法 <1>:人工 ...

  7. Bootstrap 3 Datepicker 使用过程

    最近在创建记录的时候,需要用到日历的功能.本身是使用的bootstrap布局的,所以就找到Datepicker,看了一下用起来还是挺方便的.下面就是使用过程. 依赖的资源 jQuery Moment. ...

  8. Latex引用插图格式制定问题（1）

    自定义新命令\reffig如下:\newcommand{\reffig}[1]{Figure \ref{#1}}在需要引用图片的时候,用\reffig代替\ref,就可以自动在图号前面输出" ...

  9. 如何为CriteriaOperator过滤对象转换为lambda表达式，即：linq to xpo的动态where语句

    How to convert the CriteriaOperator to a lambda expression, so, the latter expression can be used in ...

  10. ios framework 分离与合并多种CPU架构，分离与合并模拟器与真机

    ios  framework 分离与合并多种CPU架构,分离与合并模拟器与真机 如果你所用的framework支持真机和模拟器多种CPU架构,而你需要的是其中的一种或几种,那么可以可以从framewo ...