如何通過選擇標簽更改表單？

Question

我想像這樣在 a 上方創建一個<select>標簽 -

<select>
  <option value="Student">Student</option>
  <option value="Teacher">Teacher</option>
</select>

當我選擇“學生”時，顯示下面的學生表格。 當我選擇“老師”時，然后在下面顯示老師表格。 如何使用 bootstrap 或 jquery 或 javascript 執行此操作？

Answer 1

使用 jQuery 試試這個：

$('select').on('change', function() {
   if(this.value == "Student") {
     // Show Student Form
     // hide teacher form
   } else if (this.value == "Teacher") {
     // Show Teacher Form
     // hide student form
   }
});

Answer 2

這是您嘗試執行的操作的粗略示例。 它應該讓你知道去哪里。

 $(document).ready(function(){ $(".content").hide(); $('#my-select').on('change', function() { if ( this.value == 'Student') { $(".content").hide(); $("#content-1").show(); } else if ( this.value == 'Teacher') { $(".content").hide(); $("#content-2").show(); } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="my-select"> <option disabled selected value> -- select an option -- </option> <option value="Student">Student</option> <option value="Teacher">Teacher</option> </select> <p class="content" id="content-1">I am a student.</p> <p class="content" id="content-2">I am a teacher.</p>

Answer 3

你總是可以試試這個：

 $('select').change(function(){ if($(this).val() == "Teacher") { $('input').remove(); $("#myDiv").append("<input value='Teacher'/>"); } else { $('input').remove(); $("#myDiv").append("<input value='Student'/>"); } })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option value="Student">Student</option> <option value="Teacher">Teacher</option> </select> <div id="myDiv"></div>

Answer 4

你可以這樣做：

 $('#choose-form').on('change', function(){ $("#form-student, #form-teacher").hide('slow'); var form = $(this).val(); if(form == "student") $("#form-student").toggle('slow'); if(form == "teacher") $("#form-teacher").toggle('slow'); });

 #form-student, #form-teacher { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="choose-form"> <option value="0">-</option> <option value="student">Student</option> <option value="teacher">Teacher</option> </select> <form id="form-student"> <p>My student form</p> </form> <form id="form-teacher"> <p>My teacher form</p> </form>