ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 编程语言> 文章详细

JavaScript用例之省市联动选择器

2019-06-30 21:56:31  阅读：188  来源： 互联网

标签：city area eq JavaScript list 用例 choose data 选择器


介绍
本实例主要实现一个省市联动选择器可对表格内容进行筛选（主要针对表格）。实例需求为先选择省份，根据选择的省份可以选择对应省份下面的市级，支持多选。点击选择器上的对应按钮即为选择该城市，再次点击已选城市即为取消选择该城市
已选项目将展示在指定的展示区域，需求：当选择省份时显示省份，当选择了该省份下面对应的城市时，显示选择的城市名，隐藏省份名，展示区域支持删除已选项，当对应省份的所有已选城市被删除时，显示该省份，当删除省份时，选择器中的对应省份的市级选择区域消失即未选择省份就无法选择市级城市。已选项目展示区域支持收缩隐藏及列表展开。
省市数据是通过TP5获取的，在js中会有ajax获取数据，在页面开发阶段可以自己模拟数据布局，
布局采用bootstrap，功能引入jquery，数据通过thinkphp获取mysql库数据
页面布局：
html页面部分只是做一个框架搭建，主要通过js中获取到数据之后进行页面的整体绘制。

省市联动选择器 归属地筛选 
        </ul>
    <p class="choosen-list-all right">全部</p>
    <p class="clearfix"></p>
</div>
<div class="clearfix"></div>

<div class="choose-list right" id="choose_list">
    <ul id="myTab" class="nav nav-tabs">
        <li class="active col-md-6">
            <a href="#provinceList" data-toggle="tab">选择省份</a>
        </li>
        <li class="col-md-6">
            <a href="#cityList">选择城市</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade in active" id="provinceList">
            <ul>

            </ul>
        </div>
        <div class="tab-pane fade" id="cityList">
            <div class="city-box">
                <ul>

                </ul>
            </div>

        </div>
    </div>
    <hr class="hr-line">
    <div class="choose-btn-group">
        <button class="btn reset-btn">重置</button>
        <button class="btn cancel-btn">取消</button>
        <button class="btn affirm-btn">确认</button>
    </div>
</div>
<div class="table-plane col-md-12">
    <table id="myTable" class="col-md-12">

    </table>
</div>

css样式代码根据装载环境自行定义，要能融入整体分隔，本demo开发时基于页面为深色背景，样式代码仅供参考：
html,body{
height: 100%;
background-color: #101A22;
}
li{
list-style: none;
text-align: center;
}
ul{
padding: 0;
margin: 0;
}
.left{
float: left;
}
.right{
float: right;
}

.choose-btn{
width: 100%;
font-size: 16px;
padding: 0;
line-height: 38px;
background: linear-gradient(to bottom,#04C7FF,#169AFF);
}
.choosen-list-all{
width: 80px;
height: 30px;
text-align: center;
background: linear-gradient(to top,#656b83,#8892b4);
display: inline-block;
line-height: 30px;
color: #dde4f3;
margin-top: 4px;
margin-bottom: 4px;
margin-right: 10px;
cursor: pointer;
}
.choosen-list-item{
width: 80px;
height: 30px;
text-align: center;
background: #53688e;
display: inline-block;
line-height: 30px;
color: #dde4f3;
margin: 4px 5px;
}
.choosen-list-item-text{
width: 56px;
overflow: hidden;
display: inline-block;
height: 30px;
}
.btn-box{
width: 135px;
}

.border-blue{
border: 1px solid blue;
}
.border-red{
border: 1px solid red;
}
.choose-city{
max-width: 840px;
}
.del-choosen{
float: right;
vertical-align: middle;
margin-top: 3px;
cursor: pointer;
}
.choose-list{
width: 260px;
display: none;
height: 356px;
background-color: #343c4c;
color: #DDE4F3;
border-radius: 4px;
position: absolute;
right: 11px;
top: 40px;
border: 1px solid #515C70;
z-index: 1000;
}
#choose_list>.nav-tabs>li.active>a,
#choose_list>.nav-tabs>li.active>a:hover,
#choose_list>.nav-tabs>li.active>a:focus {
color: #009FDA;
background-color: transparent;
border: none;
border-bottom:4px solid #009fda ;
cursor: default;
}
#choose_list>.nav-tabs>li>a{
border-bottom:2px solid #009fda ;
line-height: 30px;
font-size: 14px;
color: #dde4f3;
}
#choose_list>.nav-tabs>li>a:hover{
background-color: #2B323F;
border: none;
color: #009FDA;
border-bottom:2px solid #009fda ;
}
#choose_list>.nav-tabs{
border: none;
}
#choose_list>.nav-tabs>li:first-child,
#choose_list>.nav-tabs>li:first-child>a{
padding-right: 0;
margin-right: 0;
}
#choose_list>.nav-tabs>li:last-child,
#choose_list>.nav-tabs>li:last-child>a{
padding-left: 0;
margin-left: 0;
}
.provience-list-item{
float: left;
width: 70px;
height: 30px;
background-color: #2B323F;
border: 1px solid #515C70;
line-height: 30px;
margin-left: 5px;
margin-right: 5px;
margin-top: 10px;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
}
#provinceList>ul{
height: 240px;
padding-left: 8px;
padding-right: 6px;
overflow-y: scroll;
}
.city-box{
height: 240px;
padding-left: 8px;
padding-right: 6px;
overflow-y: scroll;
}
::-webkit-scrollbar {/滚动条整体样式/
width: 4px; /高宽分别对应横竖滚动条的尺寸/
height: 4px;
}
::-webkit-scrollbar-thumb {/滚动条里面小方块/
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(255,255,255,0.2);
}
::-webkit-scrollbar-track {/滚动条里面轨道/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(255,255,255,0.1);
}
.hr-line{
margin-top: 10px;
margin-left: auto;
margin-right: auto;
width: 230px;
border-top: 1px solid #515C70;
margin-bottom: 10px;
}
.reset-btn,.cancel-btn,.affirm-btn{
width: 70px;
height: 30px;
text-align: center;
color: #fff;
font-size: 12px;
padding: 0;
}
.reset-btn{
background: linear-gradient(to top,#656b83,#8892b4);
margin-right: 6px;
}
.affirm-btn{
margin-left: 6px;
background: linear-gradient(to bottom,#04C7FF,#169AFF);
}
.choose-btn-group{
margin-left: 15px;
}
.has-choose{
/background: linear-gradient(to bottom,#04C7FF,#169AFF);/
background-image: url("…/img/choosen.png");
background-repeat: no-repeat;
background-position: right top;
background-color:#04C7FF!important;
/background-color:#169AFF;/
}
.pro-title{
padding: 0px 16px;
color: #dde4f3;
line-height: 30px;
font-size: 12px;
display: inline-block;
border-radius: 4px;
border:1px solid #515C70;
}
.city-list-item-pro{
color: #515C70;
clear: both;
}
.city-list-item-pro h5{
margin-bottom: 0;
}
.city-list-item {
float: left;
width: 70px;
height: 30px;
background-color: #2B323F;
border: 1px solid #515C70;
line-height: 30px;
margin-left: 5px;
margin-right: 5px;
margin-top: 10px;
border-radius: 4px;
cursor: pointer;
overflow: hidden;
}
.city-ul-box li:last-child{
clear: right;
}
.provhidden{
display: none!important;
}
.table-plane{
background-color: #2B323F;
}
#myTable tbody tr{
height: 36px;
color: #CBD4F4;
}
#myTable thead tr th{
background-color: #101A22;
color: #CBD4F4;
}
#myTable tr.odd {
background-color: #515C70;
}
.tr-hide{
display: none!important;
}
.tr-show{
}
JS功能方法：
1、获取数据：
$(function () {
$.ajax({
url: “getCity”,
type:“post”,
success:function(result){
result = eval(’(’ + result + ‘)’)
var prodata = result.prodata?result.prodata:[];
var citydata = result.citydata?result.citydata:[];
drawChoosePage(prodata,citydata);
}
});
});
2、通过数据绘制页面
//绘制选择器
function drawChoosePage(prodata,citydata){
//省份页面
for(var i=0;i<prodata.length;i++){
$("#provinceList ul").append(’

  • ’+prodata[i].area_name+’
    • ’)
    }
    //市级页面——添加省份.city-ul-box
    for(var i=0;i<prodata.length;i++){
    $("#cityList .city-box").append(’
      ’ +
      ‘
    • ’ +
      ‘
      ————’ +
      ‘’+prodata[i].area_name+’’ +
      ‘————’ +
      ‘
      ’ +
      ‘
      • ’ +
      ‘
    ’)
    }
    //市级页面——添加城市
    for(var i=0;i<prodata.length;i++){
    for(var j=0;j<citydata.length;j++){
    if(citydata[j].province_idprodata[i].area_id){
    $(".city-ul-box").eq(i).append(’
  • ’+citydata[j].area_name+’
    • ’)
    }
    }
    }
    //市级页面——去除浮动保证间距
    $(".city-ul-box").append(’
  • ’);
    //增加未选择省份提示
    KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲cityList .city-…(".city-list-item").length;i++){
    if($(".city-list-item").eq(i).text()“市辖区”){
    $(".city-list-item").eq(i).prev().siblings().hide();
    }
    }
    //隐藏市级页面
    $(".city-ul-box").hide();
    }
    //标签页激活
    $(’#myTab a’).click(function (e) {
    e.preventDefault();
    $(this).tab(‘show’)
    });
    //点击按钮切换城市选择框的出现与消失
    var showOrHide = false;
    $(function () {
    $("#choose_btn").click(function (event) {
    if(showOrHidefalse){
    $("#choose_list").fadeIn();
    $(document).one(“click”, function ()
    {
    $("#choose_list").fadeOut();
    showOrHide = false;
    });
    showOrHide = true;
    }else {
    $("#choose_list").fadeOut();
    showOrHide = false;
    }
    event.stopPropagation();//阻止事件向上冒泡
    });
    $("#choose_list").click(function (event)
    {
    event.stopPropagation();//阻止事件向上冒泡
    });
    $("#choosen_box").click(function (event)
    {
    event.stopPropagation();//阻止事件向上冒泡
    });
    });
    //点击城市选择城市与取消选择
    //省份
    KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲provinceList').…(this).text(),
    area =(this).data(′area′),level=(this).data(&#x27;area&#x27;), level =(this).data(′area′),level=(this).data(‘level’);
    if($(this).hasClass(‘has-choose’)){ //已被选中
    var len = $(".choosen-list-item").length;
    for(var i=0; i<len; i++){
    var chooselevel= $(".choosen-list-item").eq(i).data(‘level’);
    if(chooselevel == 1){
    var choosearea = $(".choosen-list-item").eq(i).data(‘area’);
    if(choosearea == area){
    $(".choosen-list-item").eq(i).addClass(‘removelist’);
    }
    }else{
    var chooseprov = $(".choosen-list-item").eq(i).data(‘prov’);
    if(chooseprov    area){
    KaTeX parse error: Expected 'EOF', got '}' at position 70: … }̲ } …(’.provience-list-item’).length;
    for(var i=0;i<provlen;i++){
    if($(’.city-ul-box’).eq(i).data(‘area’)==area){
    $(’.city-ul-box’).eq(i).children().removeClass(‘has-choose’);
    KaTeX parse error: Expected 'EOF', got '}' at position 48: … }̲ } …(’.provience-list-item’).length;
    for(var i=0;i<provlen;i++){
    if($(’.city-ul-box’).eq(i).data(‘area’)==area){
    $(’.city-ul-box’).eq(i).hide();
    $(’.city-without-prov’).show();
    $(".choosen-list-all").html(‘全部’);
    }
    }
    }
    $(’.removelist’).remove();
    $(this).removeClass(‘has-choose’);
    }else{
    KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲choosen_box .ch…(’.provience-list-item’).length;
    for(var i=0;i<len;i++){
    if($(’.city-ul-box’).eq(i).data(‘area’)==area){
    $(’.city-without-prov’).hide();
    $(’.city-ul-box’).eq(i).show();
    }
    }
    $(this).addClass(‘has-choose’);
    $(".choosen-list-all").html(‘收起全部’);
    }
    deleteChoose();
    changeTable();
    });
    //城市
    KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲cityList').off(…(this).text(),
    area =(this).data(′area′),level=(this).data(&#x27;area&#x27;), level =(this).data(′area′),level=(this).data(‘level’),
    prov =(this).data(′prov′),title=(this).data(&#x27;prov&#x27;), title=(this).data(′prov′),title=(this).attr(‘title’);
    // console.log(title);
    if($(this).hasClass(‘has-choose’)){ //已被选中
    var len = KaTeX parse error: Expected '}', got 'EOF' at end of input: …var choosearea=(".choosen-list-item").eq(i).data(‘area’);
    if(choosearea == area){
    $(".choosen-list-item").eq(i).addClass(‘removelist’);
    break;
    }
    }
    KaTeX parse error: Expected '}', got 'EOF' at end of input: … if((".choosen-list-item").eq(i).data(‘prov’)prov){
    count++;
    }
    }
    // console.log(count);
    if(count    0){
    var hiddenlen = KaTeX parse error: Expected '}', got 'EOF' at end of input: … if((’.provhidden’).eq(i).data(‘area’)==prov){
    // $(’.provhidden’).eq(i).show();
    $(’.provhidden’).eq(i).removeClass(‘provhidden’);
    }
    }
    }
    $(this).removeClass(‘has-choose’);
    }else{
    $("#choosen_box .choose-city").append(’
  • ’+
    ‘’+text+’’+
    ‘取消选择’+
    ‘
    • ’);

        var len = $(".choosen-list-item").length;
    for(var i=0;i<len;i++){
        var choosearea=$(".choosen-list-item").eq(i).data('area');
        if(choosearea == prov){
            $(".choosen-list-item").eq(i).addClass('provhidden');
            // $(".choosen-list-item").eq(i).hide();
        }
    }
    $(this).addClass('has-choose');
    $(".choosen-list-all").html('收起全部');
}
deleteChoose();
changeTable();

    });
    //点击隐藏选择列表
    $(function () {
    var isshow = true;
    $(’.choosen-list-all’).click(function () {
    if(isshow){
    $(".choose-city").hide();
    $(".choosen-list-all").html(‘展开全部’);
    isshow=false;
    }else {
    $(".choose-city").show();
    $(".choosen-list-all").html(‘收起全部’);
    isshow=true;
    }
    });
    });
    //删除已选项
    function deleteChoose(){
    $(".del-choosen").off(‘click’).on(‘click’,function () {
    var areano = $(this).parent().data(‘area’),
    level = (this).parent().data(′level′),prov=(this).parent().data(&#x27;level&#x27;), prov=(this).parent().data(′level′),prov=(this).parent().data(‘prov’),
    li = $(this).parent();
    li.remove();
    if(level==1){
    var len = KaTeX parse error: Expected '}', got 'EOF' at end of input: … var area=(".provience-list-item").eq(i).data(‘area’);
    if(area == areano){
    KaTeX parse error: Expected 'EOF', got '}' at position 102: … }̲ } …(’.city-ul-box’).eq(i).data(‘area’)==areano){
    $(’.city-ul-box’).eq(i).hide();
    }
    }
    }else{
    var len = KaTeX parse error: Expected '}', got 'EOF' at end of input: … var area=(".city-list-item").eq(i).data(‘area’);
    if(area == areano){
    KaTeX parse error: Expected 'EOF', got '}' at position 97: … }̲ } …(".choosen-list-item").eq(i).data(‘prov’)prov){
    count++;
    }
    }
    if(count    0){
    var hiddenlen = KaTeX parse error: Expected '}', got 'EOF' at end of input: … if((’.provhidden’).eq(i).data(‘area’)==prov){
    $(’.provhidden’).eq(i).removeClass(‘provhidden’);
    }
    }
    }
    }
    changeTable();
    });
    }
    //重置选择
    $(’.reset-btn’).click(function () {
    $(’.choosen-list-item’).remove();
    $(".choosen-list-all").html(‘全部’);
    $(’.provience-list-item’).removeClass(‘has-choose’);
    $(’.city-list-item’).removeClass(‘has-choose’);
    $(’.city-ul-box’).hide();
    $(’.city-without-prov’).show();
    });
    //确认选择
    $(’.affirm-btn’).click(function () {
    KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲choose_list").f…(’.choosen-list-item’).length;i++){
    if(KaTeX parse error: Expected '}', got 'EOF' at end of input: … condition[i]=(’.choosen-list-item’).eq(i).text();
    }

    }

    //调用处理页面表格数据
    clear_arr_trim(condition);
    if(condition.length>0){
    KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲myTable tbody t…(’#myTable tbody tr’).length;j++){
    for(var i=0;i<condition.length;i++){
    var tablecity = $(’#myTable tbody tr’).eq(j).children().eq(3).text();
    if(tablecity.split(" “)[0]==condition[i] || tablecity.split(” “)[1]==condition[i]){
    $(’#myTable tbody tr’).eq(j).addClass(‘tr-show’).removeClass(‘tr-hide’);
    }
    }
    }
    $(”#myTable_info").html(’’ +
    ‘共’ +
    ’ 1 ’ +
    ‘页，筛选之后共’ +
    ’ 18 ’ +
    ‘条，初始’ +
    ’ 18 ’ +
    ‘条’ +
    ‘’);
    (′.change−total′).html((&#x27;.change-total&#x27;).html((′.change−total′).html((’.tr-show’).length);
    (′.old−total′).html((&#x27;.old-total&#x27;).html((′.old−total′).html((’#myTable tbody tr’).length)
    }else{
    $(’#myTable tbody tr’).removeClass(‘tr-hide’).removeClass(‘tr-show’);
    }

    }
    function clear_arr_trim(array) {
    for(var i = 0 ;i<array.length;i++)
    {
    if(array[i] == " " || typeof(array[i]) == “undefined”)
    {
    array.splice(i,1);
    i= i-1;
    }
    }
    return array;
    }

    标签：city,area,eq,JavaScript,list,用例,choose,data,选择器
    来源： https://blog.csdn.net/qq_41751699/article/details/94358912

    本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
    2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
    3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
    4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
    5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

    关于我们 | 联系我们 | 留言反馈

    专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

    Copyright (C)ICode9.com, All Rights Reserved.

    ICode9版权所有