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>