Skip to content
Fix Code Error

Trouble with boxes appearing/hiding based on selection

July 18, 2021 by Code Error
Posted By: Anonymous

I have a dynamic dropdown, that has the secondary box appearing based on the selection of the first box. The problem I’m running into is the second box won’t stay open as soon as I select one of the options. It immediately disappears as soon as I select an option in the second box.

I know it has to do with the logic in the second script…

Any help would be appreciated, greatly.

_x000D_

_x000D_

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Elements Using Select Box</title>
<style>
    .box{
        color: #fff;
        padding: 20px;
        display: none;
        margin-top: 20px;
    }
    .red{ background: #808080; }
    .green{ background: #808080; }
    .blue{ background: #808080; }
    .orange{ background: #808080; }
    
    .box{
        padding: 20px;
    }
    .1{ background: #808080; }
    .2{ background: #808080; }
    .3{ background: #808080; }
    .4{ background: #808080; } 
    .5{ background: #808080; }
    .6{ background: #808080; }
    .7{ background: #808080; }
    .8{ background: #808080; }
    .9{ background: #808080; }
    .10{ background: #808080; }
    .11{ background: #808080; }
    .12{ background: #808080; }
    .13{ background: #808080; }
    .14{ background: #808080; }
    .15{ background: #808080; }
    .16{ background: #808080; }
    .17{ background: #808080; }
    .18{ background: #808080; }
    .19{ background: #808080; }
    .20{ background: #808080; }
    .21{ background: #808080; }
    .22{ background: #808080; }
    .23{ background: #808080; }
    .24{ background: #808080; }
    .25{ background: #808080; }
    .26{ background: #808080; }
    .27{ background: #808080; }
    .28{ background: #808080; }
    .29{ background: #808080; }
    .30{ background: #808080; }
    .31{ background: #808080; }
    
    .box{
        padding: 20px;
    }
    .Monday{ background: #808080; }
    .Tuesday{ background: #808080; }
    .Wednesday{ background: #808080; }
    .Thursday{ background: #808080; } 
    .Friday{ background: #808080; }
    .Saturday{ background: #808080; }
    .Sunday{ background: #808080; }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("select").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue){
                $(".box").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else{
                $(".box").hide();
            }
        });
    }).change();
});
</script>
</head>
<body>
    <div>
        <select>
            <option>Choose Frequency</option>
            <option value="red">Monthly</option>
            <option value="green">Semi-Monthly</option>
            <option value="blue">Bi-Weekly</option>
             <option value="orange">Weekly</option>
        </select>
    </div>
    <div class="red box">
    <select>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
      <option>13</option>
      <option value="14">14</option>
      <option>15</option>
      <option>16</option>
      <option>17</option>
      <option>18</option>
      <option>19</option>
      <option>20</option>
      <option>21</option>
      <option>22</option>
      <option>23</option>
      <option>24</option>
      <option>25</option>
      <option>26</option>
      <option>27</option>
      <option>28</option>
      <option>29</option>
      <option>30</option>
      <option>31</option>
    </select>
    </div>
    <div class="green box">
    <select>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
      <option>13</option>
      <option>14</option>
      <option>15</option>
      <option>16</option>
      <option>17</option>
      <option>18</option>
      <option>19</option>
      <option>20</option>
      <option>21</option>
      <option>22</option>
      <option>23</option>
      <option>24</option>
      <option>25</option>
      <option>26</option>
      <option>27</option>
      <option>28</option>
      <option>29</option>
      <option>30</option>
      <option>31</option>
    </select>
    and
    <select>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
      <option>13</option>
      <option>14</option>
      <option>15</option>
      <option>16</option>
      <option>17</option>
      <option>18</option>
      <option>19</option>
      <option>20</option>
      <option>21</option>
      <option>22</option>
      <option>23</option>
      <option>24</option>
      <option>25</option>
      <option>26</option>
      <option>27</option>
      <option>28</option>
      <option>29</option>
      <option>30</option>
      <option>31</option>
    </select>
    </div>
    <div class="blue box">
    <select>
      <option>Monday</option>
      <option>Tuesday</option>
      <option>Wednesday</option>
      <option>Thursday</option>
      <option>Friday</option>
      <option>Saturday</option>
      <option>Sunday</option>
    </select>
    </div>
    <div class="orange box">
    <select>
     <option>Monday</option>
     <option>Tuesday</option>
     <option>Wednesday</option>
     <option>Thursday</option>
     <option>Friday</option>
     <option>Saturday</option>
     <option>Sunday</option>
    </select>
    </div>
</body>
</html>

_x000D_

_x000D_

_x000D_

Solution

_x000D_

_x000D_

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Elements Using Select Box</title>
<style>
    .box{
        color: #fff;
        padding: 20px;
        display: none;
        margin-top: 20px;
    }
    .red{ background: #808080; }
    .green{ background: #808080; }
    .blue{ background: #808080; }
    .orange{ background: #808080; }
    
    .box{
        padding: 20px;
    }
    .1{ background: #808080; }
    .2{ background: #808080; }
    .3{ background: #808080; }
    .4{ background: #808080; } 
    .5{ background: #808080; }
    .6{ background: #808080; }
    .7{ background: #808080; }
    .8{ background: #808080; }
    .9{ background: #808080; }
    .10{ background: #808080; }
    .11{ background: #808080; }
    .12{ background: #808080; }
    .13{ background: #808080; }
    .14{ background: #808080; }
    .15{ background: #808080; }
    .16{ background: #808080; }
    .17{ background: #808080; }
    .18{ background: #808080; }
    .19{ background: #808080; }
    .20{ background: #808080; }
    .21{ background: #808080; }
    .22{ background: #808080; }
    .23{ background: #808080; }
    .24{ background: #808080; }
    .25{ background: #808080; }
    .26{ background: #808080; }
    .27{ background: #808080; }
    .28{ background: #808080; }
    .29{ background: #808080; }
    .30{ background: #808080; }
    .31{ background: #808080; }
    
    .box{
        padding: 20px;
    }
    .Monday{ background: #808080; }
    .Tuesday{ background: #808080; }
    .Wednesday{ background: #808080; }
    .Thursday{ background: #808080; } 
    .Friday{ background: #808080; }
    .Saturday{ background: #808080; }
    .Sunday{ background: #808080; }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("#select").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue){
                $(".box").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else{
                $(".box").hide();
            }
        });
    }).change();
});
</script>
</head>
<body>
    <div>
        <select id="select">
            <option>Choose Frequency</option>
            <option value="red">Monthly</option>
            <option value="green">Semi-Monthly</option>
            <option value="blue">Bi-Weekly</option>
             <option value="orange">Weekly</option>
        </select>
    </div>
    <div class="red box">
    <select>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
      <option>13</option>
      <option value="14">14</option>
      <option>15</option>
      <option>16</option>
      <option>17</option>
      <option>18</option>
      <option>19</option>
      <option>20</option>
      <option>21</option>
      <option>22</option>
      <option>23</option>
      <option>24</option>
      <option>25</option>
      <option>26</option>
      <option>27</option>
      <option>28</option>
      <option>29</option>
      <option>30</option>
      <option>31</option>
    </select>
    </div>
    <div class="green box">
    <select>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
      <option>13</option>
      <option>14</option>
      <option>15</option>
      <option>16</option>
      <option>17</option>
      <option>18</option>
      <option>19</option>
      <option>20</option>
      <option>21</option>
      <option>22</option>
      <option>23</option>
      <option>24</option>
      <option>25</option>
      <option>26</option>
      <option>27</option>
      <option>28</option>
      <option>29</option>
      <option>30</option>
      <option>31</option>
    </select>
    and
    <select>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
      <option>13</option>
      <option>14</option>
      <option>15</option>
      <option>16</option>
      <option>17</option>
      <option>18</option>
      <option>19</option>
      <option>20</option>
      <option>21</option>
      <option>22</option>
      <option>23</option>
      <option>24</option>
      <option>25</option>
      <option>26</option>
      <option>27</option>
      <option>28</option>
      <option>29</option>
      <option>30</option>
      <option>31</option>
    </select>
    </div>
    <div class="blue box">
    <select>
      <option>Monday</option>
      <option>Tuesday</option>
      <option>Wednesday</option>
      <option>Thursday</option>
      <option>Friday</option>
      <option>Saturday</option>
      <option>Sunday</option>
    </select>
    </div>
    <div class="orange box">
    <select>
     <option>Monday</option>
     <option>Tuesday</option>
     <option>Wednesday</option>
     <option>Thursday</option>
     <option>Friday</option>
     <option>Saturday</option>
     <option>Sunday</option>
    </select>
    </div>
</body>
</html>

_x000D_

_x000D_

_x000D_

Try This!

You had the javascript checking the first and second select boxes.

Answered By: Anonymous

Related Articles

  • Form field border-radius is not working only on the last…
  • VueJS masonry layout
  • Navbar not filling width of page when reduced to mobile view
  • DataTable draw daterange from vaadin-date-picker in polymer
  • Active tab issue on page load HTML
  • How do i update a javascript variable as its value changes?
  • How to prevent scrolling the whole page?
  • How can I pass a wct test while rearranging children spans…
  • render function or template not defined in component:…
  • How would I be able to multiple select and pass data in the…

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

Add column with binary values in R

Next Post:

How to get the max value of date column in pyspark

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Get code errors & solutions at akashmittal.com
© 2022 Fix Code Error