Javascript 选择下拉列表时复制表单

我有一个选择选项的下拉列表

• 如果选择的值是admin，则将显示Form1
• 如果选择的值是教师和创建者，则将显示Form2

当我选择“老师”和“创造者”时，一切似乎都很好。 但是当我选择admin-Form2时，它将与Form1一起显示。 当选择admin并仅显示Form1时，如何摆脱Form2

HTML

div class="form-group"><label class="small mb-1" >Select Roles</label>
              <select name="roles" class="form-control" style="width: 30%;" id="roles">
                 <option value="">-- Select Roles --</option>
                 <option value="admin">Admin</option>
                 <option value="teacher">Teacher</option>
                 <option value="creator">Creator</option>
              </select>
</div>

<form action="/register" method="post" id="form1">
                                <div class="form-group"><label class="small mb-1">Full name</label><input class="form-control py-4" style="width: 50%;" type="name" name="name" placeholder="Enter full name" /></div>
                                <div class="form-group"><label class="small mb-1" >Email</label><input class="form-control py-4" style="width: 50%;" type="username"  name="username" placeholder="Enter email address" /></div>
                                <div class="form-group"><label class="small mb-1" >Password</label><input class="form-control py-4" style="width: 50%;" type="password"  name="password" placeholder="Password" /></div>
                                <div class="form-group"><label class="small mb-1" >Select Primary Subject</label>
                                    <select name="roles" class="form-control" style="width: 30%;" id="Subject">
                                        <option value="Malay Language">Malay Language</option>
                                        <option value="English Language">English Language</option>
                                        <option value="Mathematics">Mathematics</option>
                                        <option value="Science">Science</option>
                                        <option value="Islamic Education">Islamic Education</option>
                                        <option value="Moral Education">Moral Education</option>
                                        <option value="Art and Visual">Art and Visual</option>
                                        <option value="Others">Others</option>
                                    </select>
                                </div>
                                <div class="form-group mt-4 mb-0"><input type="submit" value="Submit" style="width: 20%;" a class="btn btn-primary btn-block" href="/admin_user"></div>           
                            </form>

                            <form action="/register" method="post" id="form2">
                                <div class="form-group"><label class="small mb-1">Full name</label><input class="form-control py-4" style="width: 50%;" type="name" name="name" placeholder="Enter full name" /></div>
                                <div class="form-group"><label class="small mb-1" >Email</label><input class="form-control py-4" style="width: 50%;" type="username"  name="username" placeholder="Enter email address" /></div>
                                <div class="form-group"><label class="small mb-1" >Password</label><input class="form-control py-4" style="width: 50%;" type="password"  name="password" placeholder="Password" /></div>
                                <div class="form-group"><label class="small mb-1" >Select Primary Subject</label>
                                    <select name="roles" class="form-control" style="width: 30%;" id="subjek">
                                        <option value="Malay Language">Malay Language</option>
                                        <option value="English Language">English Language</option>
                                        <option value="Mathematics">Mathematics</option>
                                        <option value="Science">Science</option>
                                        <option value="Islamic Education">Islamic Education</option>
                                        <option value="Moral Education">Moral Education</option>
                                        <option value="Art and Visual">Art and Visual</option>
                                        <option value="Others">Others</option>
                                    </select>
                                </div>
                                <div class="form-group mt-4 mb-0"><input type="submit" value="Submit" style="width: 20%;" a class="btn btn-primary btn-block" href="/admin_user"></div>           
                            </form>

---

如果您将

break

关键字添加到

switch

语句中，则该命令有效。如果省略了

break

，程序将在switch语句中的下一条语句继续执行。供参考：

---

@TaqiuddinShokordey很高兴我能帮忙：）

$(document).ready(function(){
                                $("form").hide();
                            })

                            $("#roles").change(function(){
                                stateChange($(this).val());
                            });

                            function stateChange(stateValue){
                                $("form").hide();

                                switch(stateValue){
                                case 'admin':
                                    $("#form1").show();
                                ;
                                case 'teacher':
                                    $("#form2").show();
                                ;
                                case 'creator':
                                    $("#form2").show();
                                ;
                                // so on and so on...
                            }
                            }

 function stateChange(stateValue) {
    $("form").hide();

   switch (stateValue) {
     case 'admin':
       $("#form1").show();
       break;
     case 'teacher':
       $("#form2").show();
       break;
     case 'creator':
       $("#form2").show();
       break;
     // so on and so on...
   }
 }