如何通过select标签更改表单？

Question

我想在像这样的< - p>之上创建一个<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>