如何使用引导程序和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/[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> 苏伦德拉·考勒
<!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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何使用PHP和MySQL创建搜索“过滤器”
- 2
如何使用jQuery创建过滤器控件？
- 3
如何使用Linq创建过滤器？
- 4
如何使用Jquery过滤器？
- 5
如何为jQuery中的项目列表创建过滤器？
- 6
使用jQuery为表中的li创建过滤器
- 7
如何使用jQuery为表格创建下拉列表过滤器？
- 8
如何过滤数据过滤器jQuery
- 9
使用Algolia的数值过滤器时如何使用AND和OR
- 10
如何在LinkEntity中使用条件和过滤器？
- 11
如何使用Karma和Sinon监视Angular过滤器
- 12
如何在LinkEntity中使用条件和过滤器？
- 13
如何使用jQuery / JavaScript的多个过滤器列表
- 14
如何使用jQuery制作下拉列表过滤器
- 15
删除内部表过滤器引导程序
- 16
如何使用成长和过滤器功能根据ID和缺失值在Google表格中创建动态范围？
- 17
使用Gmail API创建过滤器
- 18
如何使用django_jinja应用程序创建Jinja2自定义过滤器？
- 19
如何使用django_jinja应用程序创建Jinja2自定义过滤器？
- 20
如何在jquery内容中连接两个过滤器？过滤器 1 和过滤器 2 连接结果
- 21
如何在Lucene.Net中使用Whitespaceanalyzer和LowerCase过滤器创建自己的分析器？
- 22
使用angularjs过滤器和_.groupBy
- 23
使用strace和过滤器的区别
- 24
使用strace和过滤器的区别
- 25
结合使用VLOOKUP和过滤器
- 26
交叉过滤器：如何同时对开始日期和结束日期列使用交叉过滤器
- 27
如何在Power Bi中使用默认过滤器和可用过滤器？
- 28
使用带有多个下拉菜单的 jQuery“查找”和“过滤器”过滤
- 29
如何使用Docker图像过滤器
我来说两句