How to create a filter using bootstrap and jQuery
Stack Overflow Asked by Jefin Winston on February 17, 2021
I have been trying to create a filter (image shown below) using bootstrap tabs and jQuery but I don’t know how to get the value from the 2 select options and applying to the search button.
What I need is get the value from the 2 select boxes and apply that to the search button so that the content will be displayed below.
See the image below.
<!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/[email protected]/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/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>2 Answers
<!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/[email protected]/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/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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')
});
$('button').click(function(){
$('.tab-pane').hide();
var year =$('select[id=mySelect] option').filter(':selected').attr('data-target');
var month =$('select[id=month] option').filter(':selected').attr('data-target');
//alert("year : "+year+" month: "+ month);
if(year!=undefined){
$(year).show();
}
if(month!=undefined){
$(month).show();
}
});
</script>
</body>
</html>Correct answer by Surendra Kawle on February 17, 2021
$('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>
Answered by KUMAR on February 17, 2021
Add your own answers!
Ask a Question
Get help from others!
Recent Questions
- How can I transform graph image into a tikzpicture LaTeX code?
- How Do I Get The Ifruit App Off Of Gta 5 / Grand Theft Auto 5
- Iv’e designed a space elevator using a series of lasers. do you know anybody i could submit the designs too that could manufacture the concept and put it to use
- Need help finding a book. Female OP protagonist, magic
- Why is the WWF pending games (“Your turn”) area replaced w/ a column of “Bonus & Reward”gift boxes?
Recent Answers
- haakon.io on Why fry rice before boiling?
- Peter Machado on Why fry rice before boiling?
- Jon Church on Why fry rice before boiling?
- Joshua Engel on Why fry rice before boiling?
- Lex on Does Google Analytics track 404 page responses as valid page views?