pbootcms产品模板开发选择下拉菜单的方法

本文介绍了pbootcms产品模板开发选择下拉菜单的方法，PBOOTCMS内置筛选功能。不过有时候使用产品的时候就会发现要用这种下拉选项来制作。这时候咱们需要使用JS去实现。废话不多说了，直接上代码吧。我们就这样用官方模板内置的样式。假如不需要使用其它的DIV可以自行清除掉。

下面来说说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>

直接使用吧~