时间戳

首页 > 解决方案 > 如何使用引导程序和 jQuery 创建过滤器

html - 如何使用引导程序和 jQuery 创建过滤器

问题描述

我一直在尝试使用引导选项卡和 jQuery 创建一个过滤器（如下图所示），但我不知道如何从 2 个选择选项中获取值并将其应用于搜索按钮。

我需要的是从 2 个选择框中获取值并将其应用于搜索按钮，以便内容将显示在下方。

见下图。

过滤器

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>

<body>

    <select id="mySelect">
        <option data-target="#home">2017</option>
        <option data-target="#profile">2018</option>
        <option data-target="#messages">2019</option>
        <option data-target="#settings">2020</option>
    </select>
    <select id="month">
        <option data-target="#home">Jan</option>
        <option data-target="#profile">feb</option>
        <option data-target="#messages">March</option>
        <option data-target="#settings">April</option>
    </select>
    <button> search </button>
    <div class="tab-content">
        <div class="tab-pane active" id="home">
            Div 1
        </div>
        <div class="tab-pane" id="profile">
            Div 2
        </div>
        <div class="tab-pane" id="messages">
            Div 3
        </div>
        <div class="tab-pane" id="settings">
            Div 4
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    <script>
        $('#mySelect').on('change', function(e) {
            var $optionSelected = $("option:selected", this);
            $optionSelected.tab('show')
        });
        $('#month').on('change', function(e) {
            var $optionSelected = $("option:selected", this);
            $optionSelected.tab('show')
        });
    </script>
</body>

</html>

标签： htmljquerybootstrap-4

解决方案

$('button[type="button"]').on('click', function(){
    console.log($('select#mySelect').val());
     console.log($('select#month').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="mySelect">
        <option data-target="#home">2017</option>
        <option data-target="#profile">2018</option>
        <option data-target="#messages">2019</option>
        <option data-target="#settings">2020</option>
 </select>
  <select id="month">
        <option data-target="#home">Jan</option>
        <option data-target="#profile">feb</option>
        <option data-target="#messages">March</option>
        <option data-target="#settings">April</option>
    </select>
    
<button type="button">Get value</button>

推荐阅读