jQuery移动端城市区县二级联动选择代码

js代码

<script src=\"js/jquery.min.js\"></script>
<script src=\"js/better-scroll.js\"></script>
<script src=\"js/city.js\"></script>
<script>
    var options = {
        scrollY: true, // 因为scrollY默认为true，其实可以省略
        scrollX: true,
        mouseWheel: true,
        click: true
    }
    var wrapper = document.querySelector(\'.wrapper\');
    var scroll = new BScroll(wrapper, options);
    // 城市选择
    $(\'input[name=\"city\"]\').on(\'click\',function(){
        $(\'.city-box\').slideDown(500,function(){
            scroll.refresh();
        });
        $(\'.masker\').removeClass(\'hidden\');
    }) 

    $(\'.masker\').on(\'click\', function(){
        $(\'.masker\').addClass(\'hidden\');
        $(\'.city-box\').slideUp(500);
        $(\'.area-box\').slideUp(500);
    })
    $(\'.city-box .content\').on(\'click\', \'li\',  function(e){
        $(\'input[name=\"city\"]\').val(e.target.innerHTML);
        $(\'input[name=\"district\"]\').val(\'\');
        $(\'.city-box\').slideUp(500);
        $(\'.masker\').addClass(\'hidden\');
    })

    $(\'.hot-city\').on(\'click\', \'a\',  function(e){
        $(this).addClass(\'active\');
        var hotValue = $(this).attr(\'data-value\');
        $(\'input[name=\"city\"]\').val(hotValue);
        $(\'input[name=\"district\"]\').val(\'\');
        $(\'.city-box\').slideUp(500, function(){
            $(\'.hot-city a\').removeClass(\'active\');        
        });
        $(\'.masker\').addClass(\'hidden\');
    })

    $(\'.city-sidaber\').on(\'click\',function(e){
        var value = e.target.innerHTML;
        var alphabet = $(\'.letter-title\');
        alphabet.map(function(i,item){
            if(item.innerHTML == value){
                scroll.scrollToElement(item);
            }
        })
    })

    $(\'input[name=\"district\"]\').on(\'click\',function(){
        var preValue = $(\'input[name=\"city\"]\').val();
        if(preValue){
            traverseArea(preValue);
            $(\'.area-box\').slideDown(500);
            $(\'.masker\').removeClass(\'hidden\');
        }
    }) 

    $(\'.citylist\').on(\'click\', \'li\',  function(e){
        $(\'input[name=\"district\"]\').val(e.target.innerHTML);
        $(\'.n-msg-city\').removeClass(\'tip-active\').text(\"(必填项)\");
        $(\'.area-box\').slideUp(500);
        $(\'.masker\').addClass(\'hidden\');
    })
</script>