stackoom
  简体   繁体   中英

Javascript - Error in hiding and calling specific “Div” (Calling specific div - onchange)

 原文  2016-02-03 11:05:48  9   2    javascript/ html

Question

I have a dropdown box to list 2015/2016 years. Each is provided as a div, under which it has radio buttons for (Monthly & Weekly).

If i select 2015 in dropdown - 2015 Monthly & Weekly should be view. Same for 2016.

My issue is, both the year's div are viewed together in same page. Could someone give a suggestion please. Thanks for your time and help.

My JS Code: 

 <!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:

在此处输入图片说明

2 answers

solution1
 2 ACCPTED  2016-02-03 11:24:29

The (main) problem is that instead of passing the id your pass the string year .

So you need to change the onchange value to this.value so it will take the value of the selection (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

solution2
 0  2016-02-03 11:43:16

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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Calling a specific div onclick calling javascript inside a div Hiding div that contains specific string Hiding DIV if it contains specific text Hiding a div once scrolling past a specific div Calling a function by a specific div's elements is not working in jQuery Determining the calling div in a javascript function calling javascript function inside div Calling a DIV twice using Javascript javascript to print a specific div
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM