如何解决根据下拉选择隐藏/显示内容
在此特定示例中,如何根据下拉选择更改内容?
这是我尝试过的:
<select class="selection-of-areas" id="selection-of-area" onchange="changeFunc();">
<option value="illinois">Illinois</option>
<option value="florida">Florida</option>
</select>
</div>
<div class="members-row illinois-members">
Test Illinois
</div>
<div class="members-row florida-members">
Test Florida
</div>
还有js ...
function changeFunc() {
var selectBox = document.getElementById("selection-of-area");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
}
(function($) {
$('.select-button').click(function(e) {
e.preventDefault();
var $this = $(this),$targetRow = $this.data('target'),$activeClassText = 'active';
$('.select-button').removeClass($activeClassText);
$this.addClass($activeClassText);
$('.members-row').removeClass($activeClassText);
$('.' + $targetRow + '-members').addClass($activeClassText);
});
})(jQuery)
和CSS:
.selection-of-areas {
width: 100%;
font-family: 'Josefin Sans';
font-size: 18px;
background: #eee;
padding: 11px 9px 8px;
box-shadow: 0 0 3px rgba(120,120,.5);
}
.select-area-selection {
display: block;
}
.members-row.active {
display: block;
}
.members-row {
display: none;
}
我在这里创建了一个Codepen: https://codepen.io/gpercifield/pen/MWyKYeG
它似乎根本没有触发。感谢您为我指明正确方向的帮助。
解决方法
您可以使用类似这样的内容:
$('.members-row').hide();
$('.' + selectedValue +'-members').show();
如果要使用javascript:
var hideele = document.querySelectorAll('.members-row');
for (var i = 0; i < hideele.length; i++) {
hideele[i].style.display = 'none';
}
document.querySelectorAll('.' + selectedValue + '-members')[0].style.display = 'block';
演示
function changeFunc() {
var selectBox = document.getElementById("selection-of-area");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
$('.members-row').hide();
$('.' + selectedValue +'-members').show();
}
.selection-of-areas {
width: 100%;
font-family: 'Josefin Sans';
font-size: 18px;
background: #eee;
padding: 11px 9px 8px;
box-shadow: 0 0 3px rgba(120,120,.5);
}
.select-area-selection {
display: block;
}
.members-row.active {
display: block;
}
.members-row {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="selection-of-areas" id="selection-of-area" onchange="changeFunc();">
<option value="illinois">Illinois</option>
<option value="florida">Florida</option>
</select>
<div class="members-row illinois-members">
Test Illinois
</div>
<div class="members-row florida-members">
Test Florida
</div>
,
您只需要一个可以在下拉菜单更改时触发的功能。
function changeFunc(event) {
var selectBox = document.getElementById("selection-of-area");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;console.log(selectedValue)
// get the value
var activeClassText = 'active';
$('.members-row').removeClass(activeClassText); // hide others
$("."+selectedValue+'-members').addClass(activeClassText); // show only which is selected
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。