基于选择的框 appearing/hiding 出现问题

Question

我有一个动态下拉菜单，它根据第一个框的 selection 显示第二个框。我运行遇到的问题是，一旦我 select 选择其中一个选项，第二个框就不会保持打开状态。一旦我 select 在第二个框中选择一个选项，它就会立即消失。

我知道这与第二个脚本中的逻辑有关...

如有任何帮助，我们将不胜感激。

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

Answer 1

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

试试这个！

您 javascript 检查了第一个和第二个 select 框。

基于选择的框 appearing/hiding 出现问题

Trouble with boxes appearing/hiding based on selection

html

javascript

css

dynamic