17站长网

17站长网 首页 CMS pbootcms 查看内容

pbootcms前端模板的内置筛选功能改成下拉框方式的教程

2023-1-31 21:47| 查看: 1618 |来源: 互联网

先来看效果然后上代码:先来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 ...

先来看效果

pbootcms下拉菜单,pbootcms模板开发

然后上代码:

先来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="[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="[select:link]">[select:value]</option>
                 {/pboot:select}
             </select>
         </div>
     </div>
 </div>

然后JQ代码

 <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>
本文最后更新于 2023-1-31 21:47,某些文章具有时效性,若有错误或已失效,请在网站留言或联系站长:17tui@17tui.com
·END·
站长网微信号:w17tui,关注站长、创业、关注互联网人 - 互联网创业者营销服务中心

免责声明:本站部分文章和图片均来自用户投稿和网络收集,旨在传播知识,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系我们及时修正或删除。谢谢!

17站长网微信二维码

始终以前瞻性的眼光聚焦站长、创业、互联网等领域,为您提供最新最全的互联网资讯,帮助站长转型升级,为互联网创业者提供更加优质的创业信息和品牌营销服务,与站长一起进步!让互联网创业者不再孤独!

扫一扫,关注站长网微信

大家都在看

    热门排行

      最近更新

        返回顶部