Trouble with boxes appearing/hiding based on selection
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
Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.