[英]Show/Hide based on dropdown option
我正在使用 Jquery 根据用户在下拉列表中选择的内容来显示/隐藏 div。
我的 HTML:
<select>
<option value='test'>Test</option>
<option value='example'>Example</option>
<option value='blah'>Blah</option>
</select>
<div data-show="blah">Should be shown when blah</div>
<div data-hide="example">Should be hidden when example</div>
我的Jquery(在coffeescript中):
$("select").on "change", () ->
shows = $('[data-show="' + $(this).val() + '"]')
hides = $('[data-hides="' + $(this).val() + '"]')
shows.show()
hides.hides()
当用户选择正确的选项时,这会起作用,例如Example 。 但是当用户返回说Test 时,它应该回到默认值。 我如何让这个工作?
可以使用filter()
设置最终显示,并在过滤器之前对整个组进行相反的操作
$("select").on("change", function(){ var value = this.value // hide all data-show $('[data-show]').hide().filter(function(){ return $(this).data('show') === value; }).show()// only show matching ones $('[data-hide]').show().filter(function(){ return $(this).data('hide') === value; }).hide() }).change()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option value='test'>Test</option> <option value='example'>Example</option> <option value='blah'>Blah</option> </select> <div data-show="blah">Should be shown when blah</div> <div data-hide="example">Should be hidden when example</div>
我不知道你在做什么,但这是所描述的行为,可能不是你想要的:D
$('select').on('change', (e) => { // apply defaults, then filter // credits to filter @charlietfl $('[data-show]').hide().filter('[data-show=' + $(e.target).val() + ']').show(); $('[data-hide]').show().filter('[data-hide=' + $(e.target).val() + ']').hide(); }).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option value='test'>Test</option> <option value='example'>Example</option> <option value='blah'>Blah</option> </select> <div data-show="blah">Should be shown when blah</div> <div data-hide="example">Should be hidden when example</div>
编辑添加默认隐藏/显示
创建要显示/隐藏的元素选择:
var elements = $('[data-show], [data-hide]');
然后你可以使用 jQuery 的.filter
函数来只显示选中的元素:
var elements = $('[data-show], [data-hide]'); function showElement(option) { var filter; // hide all elements befor filtering elements.hide(); // create the filter value, which will be used for filtering switch (option) { case 'test': filter = '[data-hide="example"]'; console.log('show only example'); break; case 'blah': filter = '*'; console.log('show all elements'); break; default: console.log('hide all elements (including example)'); break; } if (filter) { elements.filter(filter).show(); } } showElement('test'); $("select").on("change", function() { showElement($(this).val()); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option value='test'>Test</option> <option value='example'>Example</option> <option value='blah'>Blah</option> </select> <div data-show="blah">Should be shown when blah</div> <div data-hide="example">Should be hidden when example</div>
你还有几个错别字:
当您通过data-hide
选择元素时,还有一个额外的s
( hides
):
hides = $('[data-hides="' + $(this).val() + '"]')
当你想通过调用.hides()
隐藏hides
,jQuery 只有一个.hide()
函数来隐藏一个元素:
hides.hides()
<select class="selectBoxClass">
<option value='test'>Test</option>
<option value='example'>Example</option>
<option value='blah'>Blah</option>
</select>
<div data-show="blah" class="all ">Should be shown when blah</div>
<div data-hide="example" class="all">Should be hidden when example</div>
<script>
$(document).on('change', '.selectBoxClass', function(event) {
event.preventDefault();
$('div.all').show();
shows = $('[data-show="' + $(this).val() + '"]')
hides = $('[data-hides="' + $(this).val() + '"]')
shows.show()
hides.hides()
});
</script>
**如果你之前的代码运行不好,那么你可以试试这个。
$(function(){ $('div').hide(); $('select').change(function(){ if($(this).val()=='blah'){ $('div[data-show]').show(); $('div[data-hide]').hide(); }else if($(this).val()=='example'){ $('div[data-hide]').show(); $('div[data-show]').hide(); }else{ $('div[data-hide]').hide(); $('div[data-show]').hide(); } }) })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select> <option value='test'>Test</option> <option value='example'>Example</option> <option value='blah'>Blah</option> </select> <div data-show="blah">Should be shown when blah</div> <div data-hide="example">Should be hidden when example</div>
让我们假设您假设一组 div,其中一些您希望根据您在 jQuery 中的下拉列表中选择的内容来显示/隐藏。
这就是它可以实现的方式。
网格
<div class="row exhbitors-grid-row">
<div class="col-lg-6 col-md-6 exhibitor-grid-item" style="">
<div class="exhibitor-grid-large wow pixFadeRight" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: pixFadeRight;">
<div class="member-avater">
<img src="#" alt="">
</div>
<div class="listing-page-exhibitor-brief wow pixFadeUp" style="visibility: visible; animation-name: pixFadeUp;">
<div class="exhibitor-details">
<input type="hidden" name="industry" class="industry Accommodation" value="Accommodation">
<h4 class="grid-exhibitor-title">Tourist Board</h4>
<strong class="grid-exhibitor-copy">Manning the Booth</strong>
<div class="grid-item-host">
<span>User</span>
<a href="bcard.pdf" target="_blank" title="Download business card"><i class="fa fa-address-card b-card-file" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 exhibitor-grid-item" style="">
<div class="exhibitor-grid-large wow pixFadeRight" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: pixFadeRight;">
<div class="member-avater">
<img src="#" alt="">
</div>
<div class="listing-page-exhibitor-brief wow pixFadeUp" style="visibility: visible; animation-name: pixFadeUp;">
<div class="exhibitor-details">
<input type="hidden" name="industry" class="industry Airline" value="Airline">
<h4 class="grid-exhibitor-title">Tourist Board</h4>
<strong class="grid-exhibitor-copy">Manning the Booth</strong>
<div class="grid-item-host">
<span>User</span>
<a href="bcard.pdf" target="_blank" title="Download business card"><i class="fa fa-address-card b-card-file" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
...
...
...
</div>
在页面的某处,您有一个如下所示的下拉列表:
<select class="category-select" name="category-select" id="category-select">
<option value="-1">Industry </option>
<option value="1">Accommodation</option>
<option value="2">Airline</option>
<option value="3">Car Rentals</option>
<option value="4">City Tourist Board</option>
...
...
...
</select>
在更改此下拉列表时,我们只想显示具有与所选下拉项相同的隐藏字段值的 div。 检查 div 中上面的隐藏字段值。
我们需要一点点 jQuery 来实现这个魔法。 这是它的外观:
$(document).ready(function(){
if($(".category-select")){
$(".category-select").change(function(){
$(".exhibitor-grid-item").show();
var selectedIndustry = $(".category-select option:selected").text();
$(".exhibitor-grid-item").each(function(){
var $itemIndustry = $(this).find(".industry").val();
if($(".category-select option:selected").val() > -1){
if(selectedIndustry != $itemIndustry){
$(this).find(".industry").parent().parent().parent().parent().hide();
}
}
});
});
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.