Question

所以，我有一个基于用户类型的下拉列表。我想要的是当用户点击不同类型的用户时，它会显示不同。

<label for="user_type">Login Type:</label></td>
                    <td width="271"><select name="usertype" onChange="">
                      <option value="public">Public</option>
                      <option value="student"> Student</option
                    </select>

当用户点击公开时，它会显示一个这样的表格

  <p>Username 
    <label for="username"></label>
<input type="text" name="username" id="username">
  </p>
  <p>Password 
    <label for="password"></label>
    <input type="password" name="password" id="password">
  </p>

当用户点击学生时，它会显示一个这样的表格

 <p>Student ID 
    <label for="student_id"></label>
<input type="text" name="student_id" id="student_id">
  </p>
  <p>Password 
    <label for="password"></label>
    <input type="password" name="password" id="password">
  </p>

感谢。

Answer 1

我建议你给自己买一本关于DOM和javascript的书，因为这是一个非常基本的例子。有了这个说你可以这样做：

$('#toggler').change(function() {
  if ($('#toggler').val() === 'public') {
    $('#public').show();
    $('#student').hide();
  } else {
    $('#public').hide();
    $('#student').show();
  }
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="usertype" id="toggler">
  <option value="public">Public</option>
  <option value="student">Student</option>
</select>


  <div id="public">
    <h2>Public</h2>
    <p>Username
      <label for="username"></label>
      <input type="text" name="username" id="username">
    </p>
    <p>Password
      <label for="password"></label>
      <input type="password" name="password" id="password">
    </p>
  </div>


  <div id="student">
    <h2>Student</h2>
    <p>Student ID
      <label for="student_id"></label>
      <input type="text" name="student_id" id="student_id">
    </p>
    <p>Password
      <label for="password"></label>
      <input type="password" name="password" id="password">
    </p>
  </div>

Answer 2

像这样编辑HTML（添加onchange）：

            <label for="user_type">Login Type:</label></td>
            <td width="271"><select name="usertype" onChange="apply(this);">
              <option value="public">Public</option>
              <option value="student"> Student</option
            </select>

JavaScript的：

function apply(select) {
  var publicForm = '<p>Username <label for="username"></label><input type="text" name="username" id="username"></p><p>Password <label for="password"></label><input type="password" name="password" id="password"></p>';
  var studentForm = '<p>Student ID<label for="student_id"></label><input type="text" name="student_id" id="student_id"></p><p>Password <label for="password"></label><input type="password" name="password" id="password"></p>';
  var toAdd = '';

  switch ($(select).val()) {
    case 'public':
      toAdd = publicForm;
      break;
    case 'student':
      toAdd = studentForm;
      break;
  }
  $(select).parent().append(toAdd);
}

或者您可以创建阻止并为其设置display: none，然后只显示。

在更改选择选项，将导致不同的形式

2 个答案: