Javascript-隐藏和调用特定“ Div”时出错（调用特定div-onchange）

Question

I have a dropdown box to list 2015/2016 years. 我有一个下拉框列出2015/2016年。 Each is provided as a div, under which it has radio buttons for (Monthly & Weekly). 每个都以div的形式提供，在其下具有（每月和每周）单选按钮。

If i select 2015 in dropdown - 2015 Monthly & Weekly should be view. 如果我在下拉列表中选择2015，则应查看2015每月和每周。 Same for 2016. 2016年也一样。

My issue is, both the year's div are viewed together in same page. 我的问题是，当年的div在同一个页面中一起查看。 Could someone give a suggestion please. 有人可以给个建议吗。 Thanks for your time and help. 感谢您的时间和帮助。

My JS Code: 我的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>

Output: 输出：

Answer 1

The (main) problem is that instead of passing the id your pass the string year . （主要）问题是，您没有传递id而是传递字符串year 。

So you need to change the onchange value to this.value so it will take the value of the selection (2015/2015). 因此，您需要将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>

http://output.jsbin.com/lileze http://output.jsbin.com/lileze

Answer 2

There are some thimgs that you are missing. 有一些你想念的东西。 For example how call the function on change. 例如，如何在更改时调用函数。 The parameter of function is not the correct one. 函数的参数不正确。 This solution should work: 该解决方案应该起作用：

<!DOCTYPE html>
<html>
<body>



 <select  id="mySelect" name="year" size="1" onchange="myFunction()">
      <option value="2015" selected="selected">2015</option>
      <option value="2016">2016</option> 
    </select>

 <div id="2015" style="display:block">
      <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>

 <div id="2016" style="display:none">
        <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>
        </div>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("mySelect").value;
    document.getElementById("demo").innerHTML = "You selected: " + x;

 if(x=='2016')
            {

              document.getElementById(x).style.display="block";
              document.getElementById('2015').style.display="none";
            }else if(x=='2015')
            {
              document.getElementById(x).style.display="block";
              document.getElementById('2016').style.display="none";
            }
}
</script>

</body>
</html>

Javascript-隐藏和调用特定“ Div”时出错（调用特定div-onchange）

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-02-03 11:24:29

解决方案2
0 2016-02-03 11:43:16

Javascript-隐藏和调用特定“ Div”时出错（调用特定div-onchange）

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-02-03 11:24:29

解决方案2 0 2016-02-03 11:43:16

解决方案1
2 已采纳 2016-02-03 11:24:29

解决方案2
0 2016-02-03 11:43:16