Javascript 基于下拉选择隐藏/显示内容
在这个具体示例中,如何根据下拉选择更改内容 以下是我尝试过的:Javascript 基于下拉选择隐藏/显示内容,javascript,html,jquery,css,drop-down-menu,Javascript,Html,Jquery,Css,Drop Down Menu,在这个具体示例中,如何根据下拉选择更改内容 以下是我尝试过的: <select class="selection-of-areas" id="selection-of-area" onchange="changeFunc();"> <option value="illinois">Illinois</option> <option value="florida&
<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>
和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,120,.5);
}
.select-area-selection {
display: block;
}
.members-row.active {
display: block;
}
.members-row {
display: none;
}
我在这里创建了一个代码笔:
它似乎一点也不着火。感谢您为我指明了正确的方向。您可以使用以下方法:
$('.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';
。区域选择{
宽度:100%;
字体系列:“Josefin Sans”;
字号:18px;
背景:#eee;
填充:11px 9px 8px;
盒影:0 0 3pxRGBA(120、120、120、5);
}
.选择区域选择{
显示:块;
}
.members-row.active{
显示:块;
}
.议员行{
显示:无;
}
伊利诺伊州
佛罗里达州
测试伊利诺伊州
佛罗里达州测试
您只需要一个可以在更改下拉列表时启动的函数
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
}
您的changeFunc()
确实会启动,但您对selectedValue
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
}