HTML
xxxxxxxxxx1
<div class="container">2
<!--Grid row-->3
<div class="row">4
5
<!--Grid column-->6
<div class="col-md-6 mb-4">7
8
<h4 class="my-4 h4">Material select</h4>9
10
<select id="main" class="mdb-select md-form">11
<option value="" disabled selected>Choose your main option</option>12
<option value="1">Main option 1</option>13
<option value="2">Main option 2</option>14
<option value="3">Main option 3</option>15
</select>16
17
18
<select id="sub1" class="mdb-select md-form sub">19
<option value="" disabled selected>Choose your sub-1 option</option>20
<option value="1">Sub 1 option 1</option>21
<option value="2">Sub 1 option 2</option>22
<option value="3">Sub 1 option 3</option>23
<option value="4">Sub 1 option 4</option>24
<option value="5">Sub 1 option 5</option>25
<option value="6">Sub 1 option 6</option>26
<option value="7">Sub 1 option 7</option>27
<option value="8">Sub 1 option 8</option>28
<option value="9">Sub 1 option 9</option>29
<option value="10">Sub 1 option 10</option>30
<option value="11">Sub 1 option 11</option>31
<option value="12">Sub 1 option 12</option>32
<option value="13">Sub 1 option 13</option>33
<option value="14">Sub 1 option 14</option>34
<option value="15">Sub 1 option 15</option>35
<option value="16">Sub 1 option 16</option>36
<option value="17">Sub 1 option 17</option>37
<option value="18">Sub 1 option 18</option>38
<option value="19">Sub 1 option 19</option>39
<option value="20">Sub 1 option 20</option>40
<option value="21">Sub 1 option 21</option>41
<option value="22">Sub 1 option 22</option>42
<option value="23">Sub 1 option 23</option>43
<option value="24">Sub 1 option 24</option>44
<option value="25">Sub 1 option 25</option>45
<option value="26">Sub 1 option 26</option>46
<option value="27">Sub 1 option 27</option>47
<option value="28">Sub 1 option 28</option>48
<option value="29">Sub 1 option 29</option>49
<option value="30">Sub 1 option 30</option>50
<option value="31">Sub 1 option 31</option>51
<option value="32">Sub 1 option 32</option>52
<option value="33">Sub 1 option 33</option>53
54
55
</select>56
57
58
<select id="sub2" class="mdb-select md-form sub">59
<option value="" disabled selected>Choose your sub-2 option</option>60
<option value="1">Sub 2 option 1</option>61
<option value="2">Sub 2 option 2</option>62
<option value="3">Sub 2 option 3</option>63
<option value="4">Sub 2 option 4</option>64
<option value="5">Sub 2 option 5</option>65
<option value="6">Sub 2 option 6</option>66
<option value="7">Sub 2 option 7</option>67
<option value="8">Sub 2 option 8</option>68
<option value="9">Sub 2 option 9</option>69
<option value="10">Sub 2 option 10</option>70
<option value="11">Sub 2 option 11</option>71
<option value="12">Sub 2 option 12</option>72
<option value="13">Sub 2 option 13</option>73
<option value="14">Sub 2 option 14</option>74
<option value="15">Sub 2 option 15</option>75
<option value="16">Sub 2 option 16</option>76
<option value="17">Sub 2 option 17</option>77
<option value="18">Sub 2 option 18</option>78
<option value="19">Sub 2 option 19</option>79
<option value="20">Sub 2 option 20</option>80
<option value="21">Sub 2 option 21</option>81
<option value="22">Sub 2 option 22</option>82
<option value="23">Sub 2 option 23</option>83
<option value="24">Sub 2 option 24</option>84
<option value="25">Sub 2 option 25</option>85
<option value="26">Sub 2 option 26</option>86
<option value="27">Sub 2 option 27</option>87
<option value="28">Sub 2 option 28</option>88
<option value="29">Sub 2 option 29</option>89
<option value="30">Sub 2 option 30</option>90
<option value="31">Sub 2 option 31</option>91
<option value="32">Sub 2 option 32</option>92
<option value="33">Sub 2 option 33</option>93
94
</select>95
96
97
<select id="sub3" class="mdb-select md-form sub ">98
<option value="" disabled selected>Choose your sub-3 option</option>99
<option value="1">Sub 3 option 1</option>100
<option value="2">Sub 3 option 2</option>101
<option value="3">Sub 3 option 3</option>102
<option value="4">Sub 3 option 4</option>103
<option value="5">Sub 3 option 5</option>104
<option value="6">Sub 3 option 6</option>105
<option value="7">Sub 3 option 7</option>106
<option value="8">Sub 3 option 8</option>107
<option value="9">Sub 3 option 9</option>108
<option value="10">Sub 3 option 10</option>109
<option value="11">Sub 3 option 11</option>110
<option value="12">Sub 3 option 12</option>111
<option value="13">Sub 3 option 13</option>112
<option value="14">Sub 3 option 14</option>113
<option value="15">Sub 3 option 15</option>114
<option value="16">Sub 3 option 16</option>115
<option value="17">Sub 3 option 17</option>116
<option value="18">Sub 3 option 18</option>117
<option value="19">Sub 3 option 19</option>118
<option value="20">Sub 3 option 20</option>119
<option value="21">Sub 3 option 21</option>120
<option value="22">Sub 3 option 22</option>121
<option value="23">Sub 3 option 23</option>122
<option value="24">Sub 3 option 24</option>123
<option value="25">Sub 3 option 25</option>124
<option value="26">Sub 3 option 26</option>125
<option value="27">Sub 3 option 27</option>126
<option value="28">Sub 3 option 28</option>127
<option value="29">Sub 3 option 29</option>128
<option value="30">Sub 3 option 30</option>129
<option value="31">Sub 3 option 31</option>130
<option value="32">Sub 3 option 32</option>131
<option value="33">Sub 3 option 33</option>132
133
</select>134
135
136
</div>137
<!--Grid column-->138
139
</div>140
<!--Grid row-->141
</div>CSS
1
1
JS
xxxxxxxxxx1
// Material Select Initialization2
$(document).ready(function () {3
$('#main').material_select();4
5
6
$("#main").change(function(){7
var main = $("#main option:selected").val();8
if (main) {9
// close/destroy previous sub options: 10
$(".sub").hide().material_select('destroy');11
// open new sub-selection:12
$("#sub"+main).material_select();13
}14
}); 15
});16
17
Console errors: 0