汽车品牌carpicker带字母定位查找使用(html&css&jq&php)
汽车品牌三级联动
大体长这个样子,简单的样式及过程
html
吉普（进口）指挥官2006.04-2014 3.0L >>
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
自主选车
-
- {$vo.en_sort}
-
{$blvo.title}
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 = ""+vo[i]['en_sort']+" ";
rightNav.append(prea);
var towpre = vo[i]['col'];
for(var as = 0; as < towpre.length; as++){
var pre = "![]("+towpre[as][)
"+towpre[as]['title']+""+name+" ";
addman.append(cx);
for (var ac = 0; ac < jnobj.length; ac++) {
var op = ""+jnobj[ac]['title']+" ";
$(".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 = ""+demo2+" "+cname+" ";
rightNav.append(op1);
for (var b = 0; b < jnobj.length; b++) {
//声明option.
var op1 = ""+jnobj[b]['title']+" ";
//添加
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.
var op1 = ""+jnobj[b]['btitles']+"--"+jnobj[b]['title']+" ";
//添加
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 = ""+demo2+" "+cname+" ";
rightNav.append(op1);
for (var b = 0; b < jnobj.length; b++) {
//声明option.
var op1 = ""+jnobj[b]['title']+" ";
//添加
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();
})
},
});
})
},
});
}
});