jQuery制作简洁的多级联动Select下拉框


Posted in Javascript onDecember 23, 2014

今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多。另外,这个Select下拉框也可以绑定下拉事件,并获取当前选中项的值。

html代码:

 <div class="wrap">

        <div class="nice-select" name="nice-select">

            <input type="text" value="==选择省份==" readonly>

            <ul>

                <li data-value="1">湖北省</li>

                <li data-value="2">广东省</li>

                <li data-value="3">湖南省</li>

                <li data-value="4">四川省</li>

            </ul>

        </div>

        <div class="h20">

        </div>

        <div class="nice-select" name="nice-select">

            <input type="text" value="==选择城市==" readonly>

            <ul>

                <li data-value="1">武汉市</li>

                <li data-value="2">深圳市</li>

                <li data-value="3">长沙市</li>

                <li data-value="4">成都市</li>

            </ul>

        </div>

        <div class="h20">

        </div>

        <div class="nice-select" name="nice-select">

            <input type="text" value="==选择区县==" readonly>

            <ul>

                <li data-value="1">蔡甸区</li>

                <li data-value="2">南山区</li>

                <li data-value="3">雨花区</li>

                <li data-value="4">武侯区</li>

            </ul>

        </div>

    </div>

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

    <script>

        $('[name="nice-select"]').click(function (e) {

            $('[name="nice-select"]').find('ul').hide();

            $(this).find('ul').show();

            e.stopPropagation();

        });

        $('[name="nice-select"] li').hover(function (e) {

            $(this).toggleClass('on');

            e.stopPropagation();

        });

        $('[name="nice-select"] li').click(function (e) {

            var val = $(this).text();

            var dataVal = $(this).attr("data-value");

            $(this).parents('[name="nice-select"]').find('input').val(val);

            $('[name="nice-select"] ul').hide();

            e.stopPropagation();

            alert("中文值是:" + val);

            alert("数字值是:" + dataVal);

            //alert($(this).parents('[name="nice-select"]').find('input').val());

        });

        $(document).click(function () {

            $('[name="nice-select"] ul').hide();

        });

    </script>

css代码:

        body

        {

            color: #555;

            font-size: 14px;

            font-family: "微软雅黑" , "Microsoft Yahei";

            background-color: #EEE;

        }

        a

        {

            color: #555;

        }

        a:hover

        {

            color: #f00;

        }

        input

        {

            font-size: 14px;

            font-family: "微软雅黑" , "Microsoft Yahei";

        }

        .wrap

        {

            width: 500px;

            margin: 100px auto;

        }

        .h20

        {

            height: 20px;

            overflow: hidden;

            clear: both;

        }

        .nice-select

        {

            width: 245px;

            padding: 0 10px;

            height: 38px;

            border: 1px solid #999;

            position: relative;

            box-shadow: 0 0 5px #999;

            background: #fff url(images/a2.jpg) no-repeat right center;

            cursor: pointer;

        }

        .nice-select input

        {

            display: block;

            width: 100%;

            height: 38px;

            line-height: 38px \9;

            border: 0;

            outline: 0;

            background: none;

            cursor: pointer;

        }

        .nice-select ul

        {

            width: 100%;

            display: none;

            position: absolute;

            left: -1px;

            top: 38px;

            overflow: hidden;

            background-color: #fff;

            max-height: 150px;

            overflow-y: auto;

            border: 1px solid #999;

            border-top: 0;

            box-shadow: 0 3px 5px #999;

            z-index: 9999;

        }

        .nice-select ul li

        {

            height: 30px;

            line-height: 30px;

            overflow: hidden;

            padding: 0 10px;

            cursor: pointer;

        }

        .nice-select ul li.on

        {

            background-color: #e0e0e0;

        }

代码很简洁,我这里就不多做解释了,小伙伴们自己预览下就知道效果是多麽的简洁大方了,非常实用。

Javascript 相关文章推荐
document.documentElement &amp;&amp; document.documentElement.scrollTop
Dec 01 Javascript
javascript while语句和do while语句的区别分析
Dec 08 Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
JavaScript 学习笔记(十五)
Jan 28 Javascript
jquery延迟加载外部js实现代码
Jan 11 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
javascript 回调函数详解
Nov 11 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
Angular-Touch库用法示例
Dec 22 Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 Javascript
javascript防抖函数debounce详解
Jun 11 Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 Javascript
jQuery元素选择器用法实例
Dec 23 #Javascript
jquery制作漂亮的弹出层提示消息特效
Dec 23 #Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 #Javascript
jQuery分组选择器用法实例
Dec 23 #Javascript
常用的JS验证和函数汇总
Dec 23 #Javascript
jQuery后代选择器用法实例
Dec 23 #Javascript
浅析Javascript中“==”与“===”的区别
Dec 23 #Javascript
You might like
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
UCenter Home二次开发指南
2009/05/28 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
Python Grid使用和布局详解
2018/06/30 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
python学习开发mock接口
2019/04/28 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
linux比较文件内容的命令是什么
2015/09/23 面试题
小学红领巾中秋节广播稿
2014/01/13 职场文书
一体化教学实施方案
2014/05/10 职场文书
教师个人自我评价
2015/03/04 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书
JavaScript函数柯里化
2021/11/07 Javascript