基于自己封装的select下拉选择的省市区三级联动效果，兼容IE

最新推荐文章于 2021-09-13 15:34:34 发布

转载最新推荐文章于 2021-09-13 15:34:34 发布 · 132 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/huli0828/p/7300414.html

文章标签：

#xhtml #javascript #ViewUI

本文介绍了一个使用DIV和JavaScript实现的三级联动效果，并提供了完整的HTML样式和结构代码。通过引入jQuery库简化DOM操作，实现了省市区的选择功能。

演示页面HTML代码

<!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="Content-Type" content="text/html; charset=utf-8" />
        <title>DIV+JS三级联动效果</title>
        <script src="js/jquery-1.11.1.min.js"></script>
    </head>

    <style type="text/css">
        html {
            overflow: hidden;
            background: #fff;
            width: 100%;
            height: 100%;
        }
        
        html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: "微软雅黑";
            font-size: 12px;
            color: #000000;
            background: #fff;
            overflow: hidden;
            width: 100%;
            height: 100%;
        }
        
        button,input,select,textarea {
            font: 12px/1.5 Arial, "宋体", Helvetica, Verdana, sans-serif;
            word-wrap: break-word;
            color: #565756;
        }
        
        ul,li {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        h1,h2,h3,h4,h5,h6 {
            font-weight: normal;
            font-size: 100%;
        }
        
        img {
            border: none;
            border: 0;
            vertical-align: middle;
        }
        
        a {
            text-decoration: none;
            outline: none;
        }
        
        p {
            margin: 0;
            padding: 0;
        }
        
        input,select,textarea {
            vertical-align: middle;
            *font-size: 100%;
        }
        
        input {
            margin: 0;
            outline: none;
            padding: 0;
        }
        
        input::-ms-clear {
            display: none;
        }
        
        .f_l {
            float: left;
        }
        
        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        
        .clearfix {
            *zoom: 1
        }
        
        .model-select-box {
            width: 100%;
            height: 31px;
            line-height: 31px;
            border: 1px solid #ddd;
            margin-right: 20px;
            text-indent: 5px;
            position: relative;
        }
        
        .model-select-box.b_radius {
            border-radius: 4px;
        }
        
        .model-select-text {
            position: relative;
            height: 31px;
            padding-right: 31px;
            cursor: pointer;
            -moz-user-select: none;
            -webkit-user-select: none;
            user-select: none;
        }
        
        .model-select-text:after {
            content: '';
            display: block;
            width: 31px;
            height: 31px;
            background: #1E90FF url(images/model-select_drop.png) no-repeat center;
            position: absolute;
            top: 0;
            right: 0;
        }
        
        .model-select-box.b_radius .model-select-text:after {
            border-bottom-right-radius: 4px;
            border-top-right-radius: 4px;
        }
        
        .model-select-option {
            display: none;
            position: absolute;
            background: #fff;
            width: 100%;
            border: 1px solid #1E90FF;
            z-index: 99;
            box-sizing: border-box;
        }
        
        .model-select-option li {
            height: 24px;
            line-height: 24px;
            color: #555;
            cursor: pointer;
        }
        
        .model-select-option li.selected {
            background: #1E90FF;
            color: #fff;
        }
    </style>

    <body>

        <div id="distpicker" class="clearfix" style="width:1200px;margin:40px auto;position:relative;">
            <div class="model-select-box f_l" style="width: 200px;" id="shenfen">
                <div class="model-select-text" data-value="">选择省份</div>
                <ul class="model-select-option" style="height: 300px;overflow: auto;"></ul>
            </div>

            <div class="model-select-box f_l" style="width: 200px;" id="chengshi">
                <div class="model-select-text" data-value="">选择城市</div>
                <ul class="model-select-option" style="height: 300px;overflow: auto;"></ul>
            </div>

            <div class="model-select-box f_l" style="width: 200px;" id="quyu">
                <div class="model-select-text" data-value="">选择区域</div>
                <ul class="model-select-option" style="height: 300px;overflow: auto;"></ul>
            </div>
        </div>

        <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="js/distpicker_self.js"></script>
        <script type="text/javascript">
            $(function() {

                $("#distpicker").distpickerSelf("#shenfen", "#chengshi", "#quyu");

            });
        </script>

    </body>

</html>