根据下拉选择生成输入框

Question

我希望能够从下拉列表中进行选择，然后让它动态生成一个输入框，并在其上方添加适当的标签。例如：

如果我从下拉列表中选择学校：

<label>Enter School name:</label>
<input name="name">

如果我从下拉列表中选择个人：

<label>Enter Individual name:</label>
<input name="firstName">
<input name="lastName">

＆＃13;

＆＃13;

$('#elementreg').change(function() {

  $('#input-holder').empty();
  if ($(this).val() == "individual") {
    $('#input-holder').append('<input type="text" name="input" value="test" >');
  }

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-holder"></div>
<select class="medium" id="elementreg" name="youare">
  <option value="" selected="selected"></option>
  <option value="individual">For Yourself</option>
  <option value="school">School</option>
  <option value="group">Group</option>
  <option value="studio">Studio</option>

</select>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的代码有效，但为什么不显示/隐藏？它比每次操作DOM快得多

if let rangeKeyAttribute = model.classForCoder.rangeKeyAttribute?() {
        let index = keys.index(of: rangeKeyAttribute)
        if let index = index {
            keys.remove(at: index)
            keys.insert(rangeKeyAttribute, at: 0)
        }
    }

$("#elementreg").on("change", function() {
  var val = $(this).val();
  $(".types").hide().find('input:text').val(''); // hide and empty
  if (val) $("#" + val).show();
});

.types {
  display: none
}

您的版本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="medium" id="elementreg" name="youare">
  <option value="" selected="selected"></option>
  <option value="individual">For Yourself</option>
  <option value="school">School</option>
  <option value="group">Group</option>
  <option value="studio">Studio</option>

</select>

<div class="types" id="individual">
  <label>Enter Individual name:</label>
  <input name="firstName">
  <input name="lastName">
</div>
<div class="types" id="school">
  <input .... />
</div>

$("#elementreg").on("change", function() {
  var val = $(this).val(), $div = $("#input-holder"),fields=" ";
  switch (val) {
      case "individual":
        fields='<label>Your name: </label><input type="text" /><input type="text"/>';
        break;
      case "school":
        fields='<label>School: </label><input type="text" />';
        break;
  }
  $div.html(fields);
});