先来看效果

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>