汽车品牌carpicker带字母定位查找使用(html&css&jq&php)

汽车品牌三级联动
大体长这个样子,简单的样式及过程



html

<div class="form-div-li" id="demo1">
            <label class="form-label">车型</label>
            <eq name="cid" value="0">
                <span id="demo2" class="form-input">吉普（进口）指挥官2006.04-2014  3.0L >></span>
                <input type="hidden" name="brand" id="brand" value="bid">
                <input type="hidden" name="version" id="version" value="vid">
                <input type="hidden" name="style" id="style" value="sid">
                <else/>
                <span class="form-input">吉普（进口）指挥官2006.04-2014  3.0L</span>
            </eq>
        </div>

css

.addmantop{width: 100%;height: 50px;border-bottom: 1px solid #b5b4b5;text-align: center;color: #898a89;background-color: rgba(248,248,248,0.95)}
    .addmantop span{line-height: 50px;font-size: 20px;}
    .addmantop input{float: right;margin-right: 15px;line-height: 48px;border:0px;height: 49px;background-color: rgba(248,248,248,0.95);}
    .addmancon ul li{width: 100%;height: 50px;padding:6px 15px 6px 15px;border-bottom: 1px solid #E5E5E5;line-height: 40px;font-size: 16px;color: #898a89;}
    .addmancon ul li input{width: 100%;height: 100%;border: 0px;}
    .addmancon ul li select{width: 31%;font-size: 12px;height: 35px;margin-top: -15px;}

    .addman{ position:fixed;width: 100%;height: 100%;background-color: #fff;top:0px;overflow: auto;right: -100%;}
    .addman .glyphicon-menu-left{float: left;}
    .addman ul li{width: 100%;height: 50px;padding:6px 15px 6px 15px;border-bottom: 1px solid #E5E5E5;line-height: 40px;font-size: 16px;color: #898a89;}
    .addman ul li .glyphicon-menu-right{float: right;line-height: 40px;}
    .addman ul .li1{border-bottom: 1px solid #E5E5E5;height: 50px;line-height: 40px;font-size: 14px;width: 100%;}
    .addman ul .li1 .col-md-4{width: 33%;}
    .addman ul .li1 #left,#left1{color: #0094DE;}

    .addman-right-A{width: 50px;position: fixed;right: -50px;top:85px;}
    .addman-right-A a{width: 100%;overflow: auto;}
    .chexing{z-index: 100;position: fixed;left: 0px;top:0px;width: 100%;height: 100vh;}
    .cx-zz,.cs-show{display: inline-block;height: 100%;float: left;}
    .cx-zz{width: 30%;background: rgba(0,0,0,0.5);}
    .cs-show{width: 70%;background: #FFFFFF;overflow-y:scroll;}
    .version{width: 100%;line-height: 50px;border-bottom: 1px #eeeeee solid;padding-left: 10px;}

弹出层HTML

<div class="addman addman2">
    <div class="addmantop">
        <span id="houtui" class="houtui glyphicon glyphicon-menu-left"></span>
        <span>自主选车</span>
    </div>
    <!--品牌-->
    <ul class="rightNav" >
        <li class="li1 li3">
            <div class="input-group input-group-sm">
                <span class="input-group-addon glyphicon glyphicon-search" id="sizing-addon3"></span>
                <input type="text" class="form-control carss" name="carss" placeholder="请输入车系名称(如:丰田)" aria-describedby="sizing-addon3">
            </div>
        </li>
        <volist name="brandList" id="vo">
            <a name="d{$vo['id']}"><li style="width: 100%;height: 45px;background: #f6f6f6;" class="brandA">{$vo.en_sort}</li></a>
            <volist name="vo['col']" id="blvo">
                <li id='{$blvo.id}' class='brand'>
                    <img src="{$blvo['pic']}" style="width: 40px;">
                    {$blvo.title}
                </li>
            </volist>
        </volist>
        <!--右侧字母-->
        <ul class="addman-right-A" >
            <volist name="brandList" id="vo2">
                <a href="#d{$vo2['id']}">
                    <li style="height: 25px;border: 0px;padding: 0px;line-height: 25px;text-align: center;">{$vo2.en_sort}</li>
                </a>
            </volist>
        </ul>
    </ul>
    <!---->
</div>

js

//车型号三级联动
    var addman=$(".addman");
    var addman2=$(".addman2");
    var addmanA=$(".addman-right-A");
    var rightNav=$(".rightNav");
    var vo = {$JSbrandList};
    $("#demo1").click(function(){
        var prov = $(".brand");
//alert(prov.length);
        addman2.css({
            right: "0px",
            transition: "right 0.5s"
        });
        addmanA.css({
            right: "0px",
            transition: "right 0.5s"
        });
        if (prov.length<1) {
            $(".version").remove();
            $(".style").remove();

            //console.log(vo);
            for (var i = 0; i < vo.length; i++) {
                var prea = "<a name='d"+vo[i]['id']+"'><li style='width: 100%;height: 45px;background: #f6f6f6;' class='brandA'>"+vo[i]['en_sort']+"</li></a>";
                rightNav.append(prea);
                var towpre = vo[i]['col'];
                for(var as = 0; as < towpre.length; as++){
                    var pre = "<li id='"+towpre[as]['id']+"' class='brand'><img src='"+towpre[as]['pic']+"' style='width: 40px;'>"+towpre[as]['title']+"</li>";
                    rightNav.append(pre);
                }
            }
        }
        $(".brand").click(function(){
            var id=$(this).attr("id");
            var name=$(this).text();
            $("#brand").val(id);
            $("#demo2").html(name);
            car_ajax(id,name);
        })
    })
    function car_ajax(id,name){
        $.ajax({
            type: 'POST',
            url: "{:U('Index/ajaxBrandList')}",
            data:"vid="+id,
            success: function(data){
                //console.log(data);
                var jnobj=JSON.parse(data);
                // console.log(jnobj);
                addmanA.css({right: "-50px",transition: "right 0.5s",});
                // $(".brandA").remove();
                // $(".brand").remove();
                var cx = "<div class='chexing'><div class='cx-zz'></div><div class='cs-show'><li class='version' style='background: #f6f6f6;'>"+name+"</li></div></div>";
                addman.append(cx);
                for (var ac = 0; ac < jnobj.length; ac++) {
                    var op = "<li id='"+jnobj[ac]['id']+"' class='version'>"+jnobj[ac]['title']+"</li>";
                    $(".cs-show").append(op);
                }
                var chexing = $(".chexing");
                $(".cx-zz").click(function () {
                    chexing.remove();
                });
                $(".version").click(function(){
                    var cid=$(this).attr("id");
                    var cname=$(this).text();
                    var demo2=$("#demo2").text();
                    $("#demo2").html(demo2+" "+cname);
                    $("#version").val(cid);
                    $.ajax({
                        type: 'POST',
                        url: "{:U('Index/ajaxBrandList')}",
                        data:"sid="+cid,
                        success: function(data){
                            var jnobj=JSON.parse(data);
                            // console.log(jnobj);
                            chexing.remove();
                            $(".brand").remove();
                            $(".brandA").remove();
                            var op1 = "<li class='style' style='background: #f5f6f8'>"+demo2+" "+cname+"</li>";
                            rightNav.append(op1);
                            for (var b = 0; b < jnobj.length; b++) {
                                //声明option.<option value="pres[i]">Pres[i]</option>
                                var op1 = "<li id='"+jnobj[b]['id']+"' class='style'>"+jnobj[b]['title']+"</li>";
                                //添加
                                rightNav.append(op1);
                            }
                            $(".style").click(function(){
                                var aid=$(this).attr("id");
                                var aname=$(this).text();
                                $("#style").val(aid);
                                demo2=$("#demo2").text();
                                $("#demo2").html(demo2+" "+aname);
                                addman.css({right: "-100%",transition: "right 0.5s",});
                                $(".style").remove();
                            })
                        },
                    });
                })
            },
        });
    }
    $(".houtui").click(function(){
        addman.css({
            //display: "none",
            right: "-100%",
            transition: "right 0.5s",
        });
        $("#demo2").html("请选择车型");
        $("#brand").val('');
        $("#version").val('');
        $("#style").val('');
    })
    //搜索
    $(".carss").keyup(function(){
        var text = $(this).val();
        addmanA.css({right: "-50px",transition: "right 0.5s",});
        $(".chexing").remove();
        $(".brand").remove();
        $(".brandA").remove();
        $(".version").remove();
        // console.log(text);
        if(text){
            $.ajax({
                type: 'POST',
                url: "{:U('Index/ajaxBrandSs')}",
                data:"text="+text,
                success: function(data){
                    var jnobj=JSON.parse(data);
                    // console.log(jnobj);
                    if(jnobj){

                        for (var b = 0; b < jnobj.length; b++) {
                            //声明option.<option value="pres[i]">Pres[i]</option>
                            var op1 = "<li id='"+jnobj[b]['id']+"' data-id='"+jnobj[b]['bid']+"' class='version'>"+jnobj[b]['btitles']+"--"+jnobj[b]['title']+"</li>";
                            //添加
                            rightNav.append(op1);
                        }
                    }

                    $(".version").click(function(){
                        var cid=$(this).attr("id");
                        var bid=$(this).data("id");
                        var cname=$(this).text();
                        $("#demo2").html(cname);
                        $("#brand").val(bid);
                        $("#version").val(cid);
                        $.ajax({
                            type: 'POST',
                            url: "{:U('ajaxBrandList')}",
                            data:"sid="+cid,
                            success: function(data){
                                var jnobj=JSON.parse(data);
                                // console.log(jnobj);
                                $(".version").remove();
                                var op1 = "<li class='style' style='background: #f5f6f8'>"+demo2+" "+cname+"</li>";
                                rightNav.append(op1);
                                for (var b = 0; b < jnobj.length; b++) {
                                    //声明option.<option value="pres[i]">Pres[i]</option>
                                    var op1 = "<li id='"+jnobj[b]['id']+"' class='style'>"+jnobj[b]['title']+"</li>";
                                    //添加
                                    rightNav.append(op1);
                                }
                                $(".style").click(function(){
                                    var aid=$(this).attr("id");
                                    var aname=$(this).text();
                                    $("#style").val(aid);
                                    demo2=$("#demo2").text();
                                    $("#demo2").html(demo2+" "+aname);
                                    addman.css({right: "-100%",transition: "right 0.5s",});
                                    $(".style").remove();
                                })
                            },
                        });
                    })
                },
            });
        }
    });