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

今天我们要来分享一款很实用的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;
        }

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

时间: 2016-12-23

jQuery制作简洁的多级联动Select下拉框_jquery的相关文章

学习JS的作品-----N级的联动Select下拉框

js|select|下拉 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv=&quo

JQuery 常用积累(三)Select 下拉框

阅读目录 1.jQuery获取Select选择的Text和Value 2.jQuery设置Select选择的Text和Value 3.jQuery添加/删除Select的Option项 4.遍历option和添加.移除option <select id="hello"></select> 回到顶部 1.jQuery获取Select选择的Text和Value 语法解释: $("#select_id").change(function(){//c

JS特效-N级的联动Select下拉框

js|select|特效|下拉 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv=&

jquery动态加载select下拉框示例代码

 动态加载select下拉框的实现方法有很多,在接下来的文章中为大家介绍下jquery是如何实现的 如题,直接上代码,实战学习.  代码如下: <head><title>jquery实现动态加载select下拉选项</title>  <script type="text/javascript">  function init(){  makemoduleSelect();  }  //加载模板下拉框选项  function makemod

用jQuery模拟select下拉框的简单示例代码

 本篇文章主要是对用jQuery模拟select下拉框的简单示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 很多时候,美工会觉得默认的select下拉框很难看(特别是右侧的下拉箭头按钮),他们通常喜欢用一个自定义的图标来代替这个按钮.这样就只能用 js + div 来模拟了,倒腾了一番,用jQuery模拟了下,当然网上这种文章也不少,只是懒得去看找  代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition

jquery实现省市select下拉框的替换

 本篇文章主要是对jquery实现省市select下拉框的替换(示例代码)进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 省市对应的实现:<还有一些没封装起来>    更具选择的省份来确定市的内容   jsp代码:    代码如下: <body>   省份<select name="prin">    <option>--请选择--</option>    <option>福建</option>

jquery取消选择select下拉框示例代码

 本篇文章主要是对jquery取消选择select下拉框示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 有三个select下拉框 一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项 这需求有点儿..........   下面是三个select:   代码如下: <select name="pWaqqqy" id="sel_type" onchange="selectFunction()">

jquery取消选择select下拉框示例代码_jquery

有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: 复制代码 代码如下: <select name="pWaqqqy" id="sel_type" onchange="selectFunction()">        <option value="">全部</option>   

js实现Select下拉框具有输入功能的方法

 这篇文章主要介绍了js实现Select下拉框具有输入功能的方法,实例分析了两种比较常见的实现方法,是非常实用的技巧,需要的朋友可以参考下     本文实例讲述了js实现Select下拉框具有输入功能的方法.分享给大家供大家参考.具体实现方法如下: 实现方法一 代码如下: <HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> <TITLE>js实现