学做网站培训课程介绍

当前位置：

WordPress 三级联动多条件筛选功能制作

今天介绍一个WordPress 多条件联动筛选功能制作案例，这也是学做网站论坛为一个网站客户做的一个功能。就是Wordpress 多条件联动筛选功能。如果你正想做一个多级联动的功能，这个实例对于你研究多级联动和学习如何做网站会有较大帮助。

Wordpress 多条件联动筛选

功能介绍

这个功能它有三个选项，包括年份，品牌，型号。默认情况下，必须在年份选择之后，才可以选择其它的项目。并且当选择年份之后，品牌只显示当前年份下有的品牌，型号也只显示当前年份下品牌有的型号，这样就形成了三级联动的选择。

制作方法

第一步：创建一个空白模板命名为page-search.php，并在模板里添加以下的代码给wordpress模板命名。



<?php /*Template Name: 多重搜索*/ ?>

第二步：在Wordpress网站后台，新建一个page页面，并且选择应用page-search.php模板；

第三步：在page-search.php模板里放入以下的代码，用于制作多条件联动筛选选择框；



<form method="get" id="searchform" action="<?php echo get_option('home'); ?>/searchlist/">



<div class="item">

<select name="year" id="year">

</select>

</div>

<div class="item">

<select name="pinpai" id="pinpai" disabled="disabled">



</select>

</div>

<div class="item">

<select name="xinghao" id="xinghao" disabled="disabled">

</select>

</div>



<div>



<input id="searchsubmit" type="submit" disabled="disabled" value="查 询" class="but" /></div>

</form>

第四步：由于需要先选择年份之后，才能选择其它的项目，所以需要再放上以下的JS代码，来达到这个要求；



<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>



<script>

$('#year').change(function() {

$('#pinpai').attr("disabled",false);

})

$('#year').change(function() {

$('#xinghao').attr("disabled",false);

})



$('#year').change(function() {

$('#searchsubmit').attr("disabled",false);

})

</script>

这样就将多条件选择前端界面制作好了。

第五步：新建一个空白的JS文件，命名为index.js，用于放在三级联动JS代码；



(function () {//代码块

var yearNode = document.getElementById('year'); //获取年份的元素

var pinpaiNode = document.getElementById('pinpai'); //获取品牌的元素

var xinghaoNode = document.getElementById('xinghao'); //获取型号的select元素



//var index=pinpaiNode.selectedIndex;//选中项



var len = year.length; //获取数组的长度

//拼接字符串的方式

var yearStr = '';

for (var i = 0; i < len; i++) {

yearStr += '<option value = "' + year[i][0] + '">' + year[i][1] + '</option>'

}

//console.log(yearStr)

yearNode.innerHTML = yearStr;



//打印一下 年份的value

//console.log(yearNode.value)



//第二步， 把对应的品牌的数组 找出来

var pinpaiArr = pinpai[yearNode.value]; //找到数组

//console.log(pinpaiArr);

var pinpaiStr = ''

for (var i = 0; i < pinpaiArr.length; i++) {

pinpaiStr += '<option id="' + pinpaiArr[i][0] + '" value = "' + pinpaiArr[i][1] + '">' + pinpaiArr[i][1] + '</option>'

}

//console.log(pinpaiStr)

//console.log(pinpaiStr.id)

//pinpaiStr+= '<option>其他</option>'

pinpaiNode.innerHTML = pinpaiStr;



//第三步： 把对应的型号数组 找出；

var xinghaoArr = allxinghao[pinpaiNode.options[0].id]; //pinpaiNode.value//317 对象的应用

//console.log(xinghaoArr);

var xinghaoStr = ''

for (var i = 0; i < xinghaoArr.length; i++) {

xinghaoStr += '<option >' + xinghaoArr[i][2] + '</option>'

}

// console.log(pinpaiStr)

// xinghaoStr+= '<option>其他</option>'

xinghaoNode.innerHTML = xinghaoStr;



// 三级联动

//一，改变年份，----》品牌和学校改变



yearNode.onchange = function(){



var pinpaiArr = pinpai[yearNode.value]; //找到数组

//console.log(pinpaiArr);

var pinpaiStr = ''

for (var i = 0; i < pinpaiArr.length; i++) {

pinpaiStr += '<option id="' + pinpaiArr[i][0] + '" value = "' + pinpaiArr[i][1] + '">' + pinpaiArr[i][1] + '</option>'

}

//console.log(pinpaiStr)



//pinpaiStr+= '<option>其他</option>'

pinpaiNode.innerHTML = pinpaiStr;





console.log(pinpaiNode)

//console.log(pinpaiNode.options[index].id)

console.log(pinpaiNode.value)



//第三步： 把对应的型号数组 找出；

var xinghaoArr = allxinghao[pinpaiNode.options[pinpaiNode.selectedIndex].id]; //pinpaiNode.value//317 对象的应用

console.log(xinghaoArr);

var xinghaoStr = ''

for (var i = 0; i < xinghaoArr.length; i++) {

xinghaoStr += '<option >' + xinghaoArr[i][2] + '</option>'

}

// console.log(pinpaiStr)

xinghaoNode.innerHTML = xinghaoStr;



}



pinpaiNode.onchange = function(){



var xinghaoArr = allxinghao[pinpaiNode.options[pinpaiNode.selectedIndex].id]; //pinpaiNode.value//317 对象的应用

if(xinghaoArr){

//console.log(xinghaoArr);

var xinghaoStr = ''

for (var i = 0; i < xinghaoArr.length; i++) {

xinghaoStr += '<option >' + xinghaoArr[i][2] + '</option>'

}

// console.log(pinpaiStr)

xinghaoNode.innerHTML = xinghaoStr;

}else{

//xinghaoNode.innerHTML = '<option>其他</option>';

}



}



})()

第六步：再新建一个空白的JS文件，放入以下的联动参数，命名为Allxinghao.js；



var year = [

["AA", "年份"],

["2020", "2020"],

["2019", "2019"],

["2018", "2018"],

["2017", "2017"],

["2016", "2016"],

];



var pinpai = {

"AA": [["BB", "品牌"]],

"2020": [["000", "宝马"],["001", "奔驰"],["002", "奥迪"]],

"2019": [["100", "宝马"],["101", "奔驰"],["102", "奥迪"],["103", "丰田"]],

"2018": [["200", "宝马"],["201", "奔驰"],["202", "奥迪"],["203", "丰田"],["204", "本田"]],

"2017": [["300", "宝马"],["301", "奔驰"],["302", "奥迪"],["303", "丰田"],["304", "本田"],["305", "日产"]],

"2016": [["400", "宝马"],["401", "奔驰"],["402", "奥迪"],["403", "丰田"],["404", "本田"],["405", "现代"],["406", "林肯"]],

}



var allxinghao = {

"BB": [[0, 0, "型号"]],



//2020

"000": [[0, 0, "宝马X7"],[0, 0, "宝马X4"],[0, 0, "宝马X3"],[0, 0, "宝马X1"]],

"001": [[0, 0, "奔驰GLC"],[0, 0, "奔驰GLB"],[0, 0, "奔驰GLA"]],

"002": [[0, 0, "奥迪Q5"],[0, 0, "奥迪Q3"],[0, 0, "奥迪Q1"]],



//2019

"100": [[0, 0, "宝马X5"],[0, 0, "宝马X4"],[0, 0, "宝马X3"],[0, 0, "宝马X1"]],

"101": [[0, 0, "奔驰GLE"],[0, 0, "奔驰GLB"],[0, 0, "奔驰GLA"]],

"102": [[0, 0, "奥迪Q7"],[0, 0, "奥迪Q3"],[0, 0, "奥迪Q1"]],

"103": [[0, 0, "丰田A型"],[0, 0, "丰田B型"],[0, 0, "丰田C型"]],



//2018

"200": [[0, 0, "宝马X6"],[0, 0, "宝马X4"],[0, 0, "宝马X3"],[0, 0, "宝马X1"]],

"201": [[0, 0, "奔驰GLC"],[0, 0, "奔驰GLB"],[0, 0, "奔驰GLA"]],

"202": [[0, 0, "奥迪Q5S"],[0, 0, "奥迪Q3"],[0, 0, "奥迪Q1"]],

"203": [[0, 0, "丰田A3型"],[0, 0, "丰田B5型"],[0, 0, "丰田C4型"]],

"204": [[0, 0, "本田A1型"],[0, 0, "本田B2型"],[0, 0, "本田C3型"]],



//2017

"300": [[0, 0, "宝马X5F"],[0, 0, "宝马X4"],[0, 0, "宝马X3S"],[0, 0, "宝马X1"]],

"301": [[0, 0, "奔驰GLC"],[0, 0, "奔驰GLB"],[0, 0, "奔驰GLA"]],

"302": [[0, 0, "奥迪Q5"],[0, 0, "奥迪Q3D"],[0, 0, "奥迪Q1"]],

"303": [[0, 0, "丰田A型"],[0, 0, "丰田B型"],[0, 0, "丰田C型"]],

"304": [[0, 0, "本田A1型"],[0, 0, "本田B2型"],[0, 0, "本田C3型"]],

"305": [[0, 0, "日产BC型"],[0, 0, "日产BD型"],[0, 0, "日产BE型"],[0, 0, "日产BF型"]],



//2016

"400": [[0, 0, "宝马X5"],[0, 0, "宝马X4"],[0, 0, "宝马X3"],[0, 0, "宝马X1"]],

"401": [[0, 0, "奔驰GLC"],[0, 0, "奔驰GLB"],[0, 0, "奔驰GLA"]],

"402": [[0, 0, "奥迪Q5"],[0, 0, "奥迪Q3"],[0, 0, "奥迪Q1"]],

"403": [[0, 0, "丰田A型"],[0, 0, "丰田B型"],[0, 0, "丰田C型"]],

"404": [[0, 0, "本田A1型"],[0, 0, "本田B2型"],[0, 0, "本田C3型"]],

"405": [[0, 0, "现代S1款"],[0, 0, "现代S2款"],[0, 0, "现代S3款"],[0, 0, "现代S4款"]],

"406": [[0, 0, "林肯BBC型"],[0, 0, "林肯BBD型"],[0, 0, "林肯BBE型"],[0, 0, "林肯BBF型"]],



};

第七步：将上二步的二个JS文件传到WP模板文件夹下的JS文件夹下；并且使用下面的代码引入到page-search.php模板里；



<script src="<?php bloginfo('template_directory'); ?>/js/Allxinghao.js"></script>

<script src="<?php bloginfo('template_directory'); ?>/js/index.js"></script>

第八步：制作筛选结果显示模板；新建空白PHP页面，将以下的代码粘贴进行，保存为page-searchjieguo.php；



<?php



// 年份

if(isset($_GET['year'])&& $_GET['year']!='') {

$year=$_GET['year'];

}



// 品牌

if(isset($_GET['pinpai'])&&$_GET['pinpai']!='' ){

$pinpai=$_GET['pinpai'];

}



// 型号

if(isset($_GET['xinghao'])&&$_GET['xinghao']!='' ){

$xinghao=$_GET['xinghao'];

}



$metaArray=array();



// 自定义年份字段：year

if(isset($_GET['year'])&& $_GET['year']!=''){

$array_temp = array('key' => 'year', 'value'=>$year, 'compare'=>'LIKE');

array_push($metaArray,$array_temp);

}



// 品牌字段：pinpai

if(isset($_GET['pinpai'])&&$_GET['pinpai']!=''){

$array_temp = array('key' => 'pinpai', 'value'=>$pinpai, 'compare'=>'LIKE');

array_push($metaArray,$array_temp);

}



// 型号字段：xinghao

if(isset($_GET['xinghao'])&&$_GET['xinghao']!=''){

$array_temp = array('key' => 'xinghao', 'value'=>$xinghao, 'compare'=>'LIKE');

array_push($metaArray,$array_temp);

}



//正反顺序

$order = 'DESC';//按降序



//默认按时间排序

$orderby='date';



//常规排序方法（按发布时间）

$args = array(

'meta_query' => $metaArray,

'showposts' =>200,

'order' => $order,

'orderby' => $orderby,

);



//查询文章

$query = new WP_Query( $args );



?>



<div id="ullist2" class="ullist">

<?php while ($query->have_posts()) : $query->the_post(); ?>

<li class="clearfix">

<div class="proimg fleft">

<?php if ( has_post_thumbnail() ) { the_post_thumbnail(array('alt'=> trim(strip_tags( $post->post_title ))));} else {?><img src="<?php echo get_first_image(); ?>" alt="<?php the_title(); ?>" /><?php }?>

</div>

<div class="prodes fright">

<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>

<p class="jswz"><?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 300,'……'); ?></p>

<p>

<span>年份：<?php echo get_post_meta($post->ID,"year",true);?></span>

<span>品牌：<?php echo get_post_meta($post->ID,"pinpai",true);?></span>

<span>型号：<?php echo get_post_meta($post->ID,"xinghao",true);?></span>

</p>

</div>

</li>

<?php endwhile; ?>

</div>



<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

<script>

if($("#ullist2 > li").length > 0){

}else{

document.getElementById("ullist2").innerHTML='<div class="nzow">抱歉！本站暂无您要搜索的产品！</div>';

}



</script>

第九步：在WP网站后台，新建一个页面，选择page-searchjieguo.php模板，用于接收显示筛选结果；

到此，一个完整的Wordpress 多条件联动筛选功能就制作好了，代码有点多，大家可以参考一下。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 漂亮的wordpress淘客模板 图文教程 (111440 次浏览)
    今天再次给大家分享一款自己仿的一个wordpress淘客模板。这个模板是我自己在别人模板的基础上进行二次开发，自己比较喜欢。注意：此模板不支持IE6,
  • 用什么建网站？Wordpress建网站好不好 (110907 次浏览)
    用什么建网站？Wordpress建网站好不好？这些问题经常被新手问上问起。可以这样说，wordpress程序可以建各种类型的网站，它的功能强大之处令人称赞，
  • 网站三级、四级下拉菜单的制作方法（附代码） 图文教程 (138540 次浏览)
    在一些门户网站上，由于项目众多，不可能全部将这些项目显示在主导航上，就可以通过二级菜单，三级导航，甚至四级导航来显示。如何在自己做网站
  • 网站二级、三级联动选择制作方法（附JS Select联动代码 ） 图文教程 (19617 次浏览)
    什么是网站二级、三级联动选择二级、三级联动选择简单的说就是一层一层的选择，例如一些商城网站制作里，用户在选择衣服时，先选择品牌，再选择这
  • 如何制作网站上全国城市二级联动选择功能 图文教程 (111363 次浏览)
    什么是全国城市二级联动选择功能？全国城市二级联动选择功能在很多有全国各地城市分站的网站上很常见，用户可以选择自己想要到达的城市进入对应城
  • 自己做网站需要什么条件 (112474 次浏览)
    问：大家好！我对建设网站一窍不通；特别近想自己建设网站，请问一下需要哪些条件？听说要什么郁闷还要空间，请问这两者之间是什么关系？我要怎么
  • 网站制作三要素是哪三个必要条件 (17574 次浏览)
    在建站课程中我们经常讲网站制作三要素，那你知道网站制作三要素到底是包括哪三个要素吗？
  • wordpress 网站多条件筛选功能制作（纯代码） 图文教程附件下载 (116830 次浏览)
    我们经常在网上看到一些网站，拥有多重筛选功能。例如一些房产网站上，就会经常使用多条件筛选功能，方便用户进行筛选房源。效果如下图：自己
  • Wordpress如何做网站的多重筛选、多条件搜索功能 图文教程 (122143 次浏览)
    在前面的建站教程中，我们讲了如何制作Wordpress搜索功能，可以实现单一内容的搜索。但在实际网站建设过程中，往往需要多重筛选、多条件搜索功能。如
  • Wordpress 评论功能如何开启和关闭 视频教程 (1154507 次浏览)
    wordpress评论功能可以让用户在我们自己的网站上进行对文章的评论，发表自己的观点，很好的增强了网站与用户之间的交互性。还有的网站还添加了邮件功
  • Wordpress前台游客投稿功能制作方法（纯代码） 图文教程 (114729 次浏览)
    纯代码Wordpress前台投稿功能制作方法，很多建网站学员学习了Wordpress教程后，使用Wordpress 程序建了网站。但如果每天都是自己更新文章，感觉会有点
  • 新手学习网站制作（0基础入门） 图文教程 (111791 次浏览)
    零基础新手要学习网站建设，以下的网站建设教程是零基础新手必须学习的网站制作教程。只有将以下的基础知识学会了，才能为以后建网站打下坚实的基础。
  • 上海电气公司网站制作案例 图文教程 (15810 次浏览)
    这是一家上海电气公司网站，网站制作时采用传统企业网站制作方法与布局结构。网站顶部使用大尺寸的LOGO，网站导航制作使用全屏宽度菜单，每个菜单项宽

建站培训课程

最新教程

其它教程