PBOOTCMS自带筛选功能。但是有时候接触项目的时候会发现需要用这种下拉选项来制作。
这个时候我们需要用到JS来实现。
话不多说了,直接上代码吧。我们还是用官方模板自带的样式。如果不需要用到其他的DIV请自行去除掉。
<!-- 分类筛选 -->
<div class="my-3">
<div class="row">
<div class="col-12 col-sm-2 col-md-1">类型:</div>
<div class="col-12 col-sm-10 col-md-11">
<select class="footer_sel" id="FriendLink">
<option selected="selected" value="#">选择分类</option>
{pboot:select field=ext_type}
<option {pboot:if('[select:value]'=='[select:current]')}selected="selected"{/pboot:if} value="/productsvideo[select:link]">[select:value]</option>
{/pboot:select}
</select>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-2 col-md-1">颜色:</div>
<div class="col-12 col-sm-10 col-md-11">
<select class="footer_sel" id="FriendLink2">
<option selected="selected" value="#">选择分类</option>
{pboot:select field=ext_color}
<option {pboot:if('[select:value]'=='[select:current]')}selected="selected"{/pboot:if} value="/productsvideo[select:link]">[select:value]</option>
{/pboot:select}
</select>
</div>
</div>
</div>
<script>
(function (window, $) {
function init() {
bindEvt();
}
init();
function bindEvt() {
$("#FriendLink").bind("change",function() {
var selectedHref = $("#FriendLink :selected").val();
if (selectedHref != "") {
window.open(selectedHref,"_self");
}
});
}
function init2() {
bindEvt2();
}
init2();
function bindEvt2() {
$("#FriendLink2").bind("change",function() {
var selectedHref = $("#FriendLink2 :selected").val();
if (selectedHref != "") {
window.open(selectedHref,"_self");
}
});
}
})(window, jQuery);
</script>
然后我们发现其他子类可以使用了。但是全部选项依旧是:a标签筛选。
所以我们需要修改PHP代码。
打开:ParserController.php 一千行左右。
if (get($field, 'vars')) {
$out_html = '<option value="/productsvideo' . $path . '">' . $text . '</option>';
} else {
$out_html = '<option value="/productsvideo' . $path . '" selected="selected">' . $text . '</option>';
}
其中:productsvideo为当前栏目的URL
大家好,这里是黑马视觉,今天我们来聊聊在深圳建一个网站需要多少钱?龙华网站建设需要多少钱?从所周知,...
在深圳有很多外贸公司,他们已经不满足于通过其他平台来引流,于是他们都需要建设一个自己自己的外贸网站,...
*近在维护一台服务器的时候发现这台服务器CPU一直在99%到100%。服务器上运行的网站不多,也才3个.一开始怀...
安装好宝塔面板之后,我们进行安全扫描,会发现至少扫描出十几个风险。如果有钱,就直接企业版,一键进行修...