详细介绍

效果如图

直接上代码 layui前端自己套

    <!-- 分类筛选 -->
     <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>

下面是JS

<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>