脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery制作简洁的多级联动Select下拉框，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

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

htML代码：

 

代码如下:

 <p class="wrap">
        <p 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>
        </p>
        <p class="h20">
        </p>
        <p 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>
        </p>
        <p class="h20">
        </p>
        <p 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>
        </p>
    </p>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script>
        $(&#39;[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();
  &nbnbsp;     });
    </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;
        }

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery制作简洁的多级联动Select下拉框全部内容，希望文章能够帮你解决javascript代码实例教程-jQuery制作简洁的多级联动Select下拉框所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。