Trouble with boxes appearing/hiding based on selection

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

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

Leave a Reply

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