我有一个下拉框来列出 2015/2016 年。每个都以 div 的形式提供，其下方有(每月和每周)的单选按钮。
如果我在下拉列表中选择 2015 年 - 应查看 2015 年每月和每周。 2016 年也是如此。
我的问题是，两个年份的 div 在同一页面中一起查看。 有人可以给个建议吗？感谢您的时间和帮助。
我的 JS 代码:
<!DOCTYPE html>
<html>
<body>
<select class="dropdown" id="year" name="year" size="1" onchange="changeDiv('year');">
<option value="2015" selected="selected">2015</option>
<option value="2016">2016</option>
</select>
<div id="2015">
<B>AAAAAAA</B>
<input type="radio" checked="checked" onclick="javascript:changeDiv('2015Monthly');" />Monthly
<input type="radio" onclick="javascript:changeDiv('2015Weekly');" align="left" />Weekly
<div id="2015Monthly" ><B>2015 - Monthly</B></div>
<div id="2015Weekly" ><B>2015 - Weekly</B></div>
<div id="2016">
<B>HHHHHHH</B>
<input type="radio" checked="checked" onclick="javascript:changeDiv('2016Monthly');" />Monthly
<input type="radio" onclick="javascript:changeDiv('2016Weekly');" />Weekly
<div id="2016Monthly" ><B>2016 - Monthly</B></div>
<div id="2016Weekly" ><B>2016 - Weekly</B></div>
<script>
function changeDiv(divId)
{
if(divId=='2015Monthly')
{
document.getElementById(divId).style.display="block";
document.getElementById('2015Weekly').style.display="none";
}else if(divId=='2015Weekly')
{
document.getElementById(divId).style.display="block";
document.getElementById('2015Monthly').style.display="none";
}else if(divId=='2016Monthly')
{
document.getElementById(divId).style.display="block";
document.getElementById('2016Weekly').style.display="none";
}else if(divId=='2016Weekly')
{
document.getElementById(divId).style.display="block";
document.getElementById('2016Monthly').style.display="none";
}else if(divId=='2016')
{
document.getElementById(divId).style.visibility="visible";
document.getElementById('2015').style.visibility="hidden";
}else if(divId=='2015')
{
document.getElementById(divId).style.visibility="visible";
document.getElementById('2016').style.visibility="hidden";
}
}
</script>
</body>
</html>输出:
最佳答案
(主要)问题是，您传递的不是 id，而是字符串 year。
因此，您需要将 onchange 值更改为 this.value，以便它将采用所选内容的值 (2015/2015) .
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="dropdown" id="year" name="year" size="1" onchange="changeDiv(this.value);">
<option value="2015" selected="selected">2015</option>
<option value="2016">2016</option>
</select>
<div id="2015">
<B>AAAAAAA</B>
<input type="radio" checked="checked" onclick="javascript:changeDiv('2015Monthly');" name="2015_type" />Monthly
<input type="radio" onclick="javascript:changeDiv('2015Weekly');" align="left" name="2015_type" />Weekly
<div id="2015Monthly" ><B>2015 - Monthly</B></div>
<div id="2015Weekly" ><B>2015 - Weekly</B></div>
</div>
<div id="2016">
<B>HHHHHHH</B>
<input type="radio" checked="checked" onclick="javascript:changeDiv('2016Monthly');" name="2016_type" />Monthly
<input type="radio" onclick="javascript:changeDiv('2016Weekly');" name="2016_type" />Weekly
<div id="2016Monthly" ><B>2016 - Monthly</B></div>
<div id="2016Weekly" ><B>2016 - Weekly</B></div>
</div>
<script>
function changeDiv(divId)
{
if(divId=='2015Monthly')
{
document.getElementById(divId).style.display="block";
document.getElementById('2015Weekly').style.display="none";
}else if(divId=='2015Weekly')
{
document.getElementById(divId).style.display="block";
document.getElementById('2015Monthly').style.display="none";
}else if(divId=='2016Monthly')
{
document.getElementById(divId).style.display="block";
document.getElementById('2016Weekly').style.display="none";
}else if(divId=='2016Weekly')
{
document.getElementById(divId).style.display="block";
document.getElementById('2016Monthly').style.display="none";
}else if(divId=='2016')
{
document.getElementById(divId).style.display="block";
document.getElementById('2015').style.display="none";
}else if(divId=='2015')
{
document.getElementById(divId).style.display="block";
document.getElementById('2016').style.display="none";
}
}
$('#year').change();
$(':checked').trigger('click');
</script>
</body>
</html>关于Javascript - 隐藏和调用特定 "Div"时出错(调用特定 div - onchange)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35175308/