Jquery+Bootstrap通过省选择学校

最新推荐文章于 2022-05-03 23:21:18 发布

劲枫

最新推荐文章于 2022-05-03 23:21:18 发布

阅读量485

点赞数 2

分类专栏：前端文章标签：两级联动选省和学校 js通过省选学校 js实现全国高校选择

本文链接：https://blog.csdn.net/TCF_JingFeng/article/details/80064510

版权

前端专栏收录该内容

60 篇文章 0 订阅

订阅专栏

说明：数据部分请到劲枫的博客下载，然后拷贝到对应位置

可以实现二级联动选择，先选择省，然后再选择对应的学校，代码可以直接使用。数据也是json格式，下载下来就可用，不涉及数据库，单纯的前端实现方式，效率更高，对服务器压力更小

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="http://lib.baomitu.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>


<style>
 * {
    margin: 0;
    padding: 0;
}
ul li {
    list-style: none;
}

.provinceSchool{

    position: absolute;
    width: 580px;
    /*height: 320px;*/
    border: 1px solid #72B9D7;
    top: 48px;
    left: 0;
    z-index: 1000;
}


.provinceSchool .proSelect {
    width: 550px;
    height: 30px;
    margin: 10px 0 6px 15px;
}

.provinceSchool .proSelect select {
    width: 136px;
    /*display: inline-block;*/
    height: 30px;
    line-height: 30px;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.provinceSchool .proSelect input {
    display: none;
    width: 230px;
    height: 30px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;

}

.provinceSchool .schoolList {
    padding: 5px 15px;
    margin-bottom: 6px;
    font: 12px "微软雅黑";
    background: #FFF;

    width: 550px;
    height: 120px;
    margin-left: 15px;
    overflow-y: auto;
    border: 1px solid #72B9D7;
}

.provinceSchool .schoolList ul {
    width: 510px;
}

.provinceSchool .schoolList ul li {
    float: left;
    width: 158px;
    height: 22px;
    margin-left: 6px;
    padding-left: 6px;
    line-height: 22px;
    cursor: pointer;
}

.provinceSchool .schoolList ul li.DoubleWidthLi {
    width: 328px;
}

.provinceSchool .schoolList ul li:hover {
    background: #72B9D7;
}

.provinceSchool .button {
    width: 100%;
    height: 40px;
    margin-top: 8px;
}

.provinceSchool .button button {
    float: right;
    height: 30px;
    margin-right: 20px;
    padding: 4px 10px;
    border: none;
    font-weight: 600;
    /*cursor: pointer;*/
}
</style>

<body>
<div class="container stage">



    <div class="input-group input-group-lg " style="width: 400px;">
    <span class="input-group-addon">学校：</span>
    <input id="schoolName" name="school" type="text" class="form-control form-control-new" placeholder="School">
        <!--输入的input id 设置为schoolName-->
        <!--显示省 和 学校-->
        <div id="proSchool" class="provinceSchool" hidden >
      
            <div class="proSelect">
                <select ></select>
                <span>如没找到选择项，请选择其他手动填写</span>
                <input type="text">
            </div>

            <div class="schoolList">
                <ul>
                </ul>
            </div>

            <div class="button">
                <button type="button" class="btn btn-info" value="1" flag="1">确定</button>
                <button type="button" class="btn" value="0" flag="0">取消</button>
            </div>
        </div>
        <!--显示省 和 学校-->
    </div>


</div>


</body>
</html>

<script src="http://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    var province = [请将下载的province数据考过来];
    var proSchool = {
        请将下载的proSchool数据复制过来
    };


     $("#schoolName").focus(function () {
        $(".provinceSchool").show();
    });

     //初始化省的下拉列表
     var provinceSelectStr = "";
     for(var i=0;i<province.length;i++){
         provinceSelectStr += "<option value='"+province[i][0]+"'>"+province[i][1]+"</option>" //进行select下拉列表字符串拼接
     }
    $(".proSelect select").html(provinceSelectStr);

     //初始化学校的列表
    var selectedPro = $(".proSelect select").val();//获取选的省的value
    var schoolListStr = new String(proSchool[selectedPro]);//通过选择的省的编号去proSchool里取得对应省的学校
    var schoolArrayList = schoolListStr.split(",");
    var schoolULlistr = "" //拼接学校的html代码
    for(var i=0;i<schoolArrayList.length;i++){
        if(schoolArrayList[i].length > 13){
            schoolULlistr += "<li class='DoubleWidthLi'>"+schoolArrayList[i]+"</li>"
        }else {
            schoolULlistr += "<li>"+schoolArrayList[i]+"</li>"
        }
    }
    $(".schoolList ul").html(schoolULlistr)//拼接学校的html代码
   //学校列表点击事件
    $(".schoolList ul li").bind("click",function () {
        $("#schoolName").val($(this).html());
        $("#proSchool").hide();
    })





    //切换省的事件
    $(".proSelect select").change(function () {

        if("99" != $(this).val()){
            $(".proSelect span").show();
            $(".proSelect input").hide();

            var selectedPro = $(this).val();//获取选的省的value
            var schoolListStr = new String(proSchool[selectedPro]);//通过选择的省的编号去proSchool里取得对应省的学校
            var schoolArrayList = schoolListStr.split(",");
            var schoolULlistr = "" //拼接学校的html代码
            for(var i=0;i<schoolArrayList.length;i++){
                if(schoolArrayList[i].length > 13){
                    schoolULlistr += "<li class='DoubleWidthLi'>"+schoolArrayList[i]+"</li>"
                }else {
                    schoolULlistr += "<li>"+schoolArrayList[i]+"</li>"
                }
            }
            $(".schoolList ul").html(schoolULlistr)//拼接学校的html代码
              //学校列表点击事件
            $(".schoolList ul li").bind("click",function () {
                $("#schoolName").val($(this).html());
                $("#proSchool").hide();
            })
        }else {
            $(".schoolList ul").html("");
            $(".proSelect span").hide();
            $(".proSelect input").show();

        }
    })





    //按钮点击事件
    $(".button button").bind("click",function () {
        var flag = $(this).attr("flag");
        // var btnvalue = $(this).val()
        // console.log(typeof (btnvalue))

        if( "0" == flag){
            $("#proSchool").hide()
        }else if("1" == flag){
            var selectedPro = $(".proSelect select").val()
            if ("99" == selectedPro){
                $("#schoolName").val($(".proSelect input").val());
            }
            $(".provinceSchool").hide()

        }
    })
</script>

劲枫

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery+Bootstrap通过省选择学校

说明：数据部分请到劲枫的博客下载，然后拷贝到对应位置可以实现二级联动选择，先选择省，然后再选择对应的学校，代码可以直接使用。数据也是json格式，下载下来就可用，不涉及数据库，单纯的前端实现方式，效率更高，对服务器压力更小&lt;!DOCTYPE html&gt;&lt;html lang="zh-CN"&gt;&lt;head&gt; &lt;meta charset="UTF-8"...
复制链接

扫一扫