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 相关文章推荐
javascript 对象比较实现代码
Apr 27 Javascript
jquery操作cookie插件分享
Jan 14 Javascript
js使用eval解析json实例与注意事项分享
Jan 18 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
js实现进度条的方法
Feb 13 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
Oct 27 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
PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
JavaScript中的闭包原理分析
2010/03/08 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
javascript中字符串拼接详解
2014/09/26 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
Python开发的实用计算器完整实例
2017/05/10 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
keras中epoch,batch,loss,val_loss用法说明
2020/07/02 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
教师应聘个人求职信
2013/12/10 职场文书
小学教师听课制度
2014/02/01 职场文书
材料化学专业求职信
2014/07/15 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
大四学生个人总结
2015/02/15 职场文书
小学生交通安全寄语
2015/02/27 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js