JavaScript用例の省市連動セレクタ

24096 ワード
先端基礎学習 インスタンス学習
この例では、主に1つの省市連動セレクタを実装して、表の内容をフィルタリングすることができます(主に表).インスタンスの要件は、まず省を選択し、選択した省に応じて対応する省の下の市レベルを選択し、複数選択をサポートすることです.セレクタ上の対応ボタンをクリックするとその都市が選択され、再び選択された都市をクリックするとその都市が選択されていない項目が指定された展示エリアに表示されます.必要:省を選択すると省が表示され、その省の下の対応する都市を選択すると、選択された都市名が表示され、省名が表示され、展示エリアは削除された選択肢がサポートされ、対応する省のすべての選択された都市が削除された場合、その省が表示されます.省を削除すると、セレクタの対応する省の市レベル選択領域が消え、省を選択しないと市レベル都市を選択できません.選択した項目表示領域では、縮小非表示およびリスト展開がサポートされています.省・市のデータはTP 5を通じて取得され、jsではajaxがデータを取得し、ページ開発段階では自分でデータレイアウトをシミュレートすることができ、レイアウトはbootstrapを採用し、機能はjqueryを導入し、データはthinkphpを通じてmysqlライブラリのデータページレイアウトを取得する:htmlページ部分はフレームワーク構築にすぎず、主にjsでデータを取得した後、ページ全体の描画を行う.省市連動セレクタ
ホームフィルタ

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 $("#provinceList ul").append(’

  • ’+prodata[i].area_name+’
    • ’)
    }
    //市级页面——添加省份.city-ul-box
    for(var i=0;i $("#cityList .city-box").append(’
      ’ +
      ‘
    • ’ +
      ‘
      ————’ +
      ‘’+prodata[i].area_name+’’ +
      ‘————’ +
      ‘
      ’ +
      ‘
      • ’ +
      ‘
    ’)
    }
    //市级页面——添加城市
    for(var i=0;i for(var j=0;j if(citydata[j].province_id prodata[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(showOrHide false){
    $("#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 = ( t h i s ) . d a t a ( ′ a r e a ′ ) , l e v e l = (this).data('area'), level = (this).data(′area′),level=(this).data(‘level’);
    if($(this).hasClass(‘has-choose’)){ //已被选中
    var len = $(".choosen-list-item").length;
    for(var i=0; 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 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 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 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 = ( t h i s ) . d a t a ( ′ a r e a ′ ) , l e v e l = (this).data('area'), level = (this).data(′area′),level=(this).data(‘level’),
    prov = ( t h i s ) . d a t a ( ′ p r o v ′ ) , t i t l e = (this).data('prov'), 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

    });//選択リスト$(function(){var isshow=true;$(’.choosen-list-all’).click(function(){if(isshow){$(".choose-city")).hide();$(".choosen-list-all").html(‘すべて展開’);isshow=false;}else{$(".chose-city").show();$(".chosen-list-all").html(‘すべてを閉じる’);isshow=true;});//選択されたfunction deleteChoose(){$(「.del-choosen」).off(‘click’).on(‘click’,function(){var areano=$(this).parent().data(‘area’)、level=(t h i s).p a r e n t().d a t a(’l e v e l’)、p r o v=(this).parent(..data('level')、prov=(this).parent(..parent(..parent().data((').parent((((.(this).parent(..parent(..(’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(count0){ 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(){$(’.c hoosen-list-item’).remove();$(".c hoosen-list-all").html(‘すべて’);$(’.provience- list-item’).removeClass(‘has-chose’);$(’.city-list-list-item’).removeClass(‘has-chose’);$(’.city-ul- box’).hide();$(’.city-without-prov’).show(((('.city-without-prov’).show(show(').show((('.c ity-without-prov’)).);});//$(’.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 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’+‘条’+‘条’+‘‘’);(’.cha n n n g e−t o t t t a l’).html((((('.change−total').html((’.change−total’)/.html((’.c h h a n n n g e−t o t t t t t a l’).html((((’.c h a n g e−t t t t t a l’).h t t t t t t t t t t a l’).h t t t t t m l((('..'....old-total').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 { if(array[i] == ""|| typeof(array[i]) == “undefined”) { array.splice(i,1); i= i-1; } } return array; }
    重複除外
    TIL-070|バイナリ検索ツリー