Question

我想创建一个表单，通过select中的选择值显示给用户输入。

    <div class="form-group">
        <label for="select" class="col-lg-2 control-label">Accompanying person</label>
        <div class="col-lg-10">
            <select ng-model="myVar" class="form-control" id="select">
                <option value="ppl1">1</option>
                <option value="ppl2">2</option>
                <option value="ppl3">3</option>
                <option value="ppl4">4</option>
                <option value="ppl5">5</option>
            </select>
        </div>
    </div>

    <!-- I want display this x3 if selct 3 selected -->
    <div class="form-group">
        <label for="inputEmail" class="col-lg-2 control-label">Name</label>
        <div class="col-lg-10">
            <input class="form-control" id="inputEmail" placeholder="Name" type="text">
        </div>
    </div>
    <div class="form-group">
        <label for="inputEmail" class="col-lg-2 control-label">Subname</label>
        <div class="col-lg-10">
            <input class="form-control" id="inputEmail" placeholder="Subname" type="text">
        </div>
    </div>
    <!-- End -->

https://jsfiddle.net/kuchar/fwpccc5r/#&togetherjs=swsLG9gvpN

https://jsfiddle.net/kuchar/fwpccc5r/

Answer 1

看看这个：https://jsfiddle.net/ha2o3zpq/3/

在jQuery和CSS的帮助下：

$("#select").change(function() {
  var count = parseInt($(this).val().replace("ppl", ""));
  $("#npersons").html("");
  for (var i = 0; i < count; i++) {
    $("#npersons").append("<h4>Person : #" + (i + 1) + "</h4>");
    $("#npersons").append($("#persons").clone().prop("id", "ppl" + i).show());
  }
});

$("#select").change(function() {
  var count = parseInt($(this).val().replace("ppl", ""));
  $("#npersons").html("");
  for (var i = 0; i < count; i++) {
    $("#npersons").append("<h4>Person : #" + (i + 1) + "</h4>");
    $("#npersons").append($("#persons").clone().prop("id", "ppl" + i).show());
  }
});

#persons {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form class="form-horizontal">
  <fieldset>
    <legend>Formularz rezerwacji</legend>

    <div class="form-group">
      <label for="inputName" class="col-lg-2 control-label">Name</label>
      <div class="col-lg-10">
        <input class="form-control" id="inputName" placeholder="Name" type="text">
      </div>
    </div>

    <div class="form-group">
      <label for="inputSubname" class="col-lg-2 control-label">Subname</label>
      <div class="col-lg-10">
        <input class="form-control" id="inputSubname" placeholder="Subname" type="text">
      </div>
    </div>

    <div class="form-group">
      <label for="inputOsk" class="col-lg-2 control-label">Name OSK</label>
      <div class="col-lg-10">
        <input class="form-control" id="inputOsk" placeholder="Name OSK" type="text">
      </div>
    </div>

    <div class="form-group">
      <label for="inputNip" class="col-lg-2 control-label">NIP</label>
      <div class="col-lg-10">
        <input class="form-control" id="inputNip" placeholder="NIP" type="text">
      </div>
    </div>

    <div class="form-group">
      <label for="inputEmail" class="col-lg-2 control-label">Email</label>
      <div class="col-lg-10">
        <input class="form-control" id="inputEmail" placeholder="Email" type="text">
      </div>
    </div>

    <div class="form-group">
      <label for="inputPhone" class="col-lg-2 control-label">Phone number</label>
      <div class="col-lg-10">
        <input class="form-control" id="inputPhone" placeholder="Phone number" type="text">
      </div>
    </div>

    <div class="form-group">
      <label for="textArea" class="col-lg-2 control-label">Address</label>
      <div class="col-lg-10">
        <textarea class="form-control" rows="3" id="textArea"></textarea>

      </div>
    </div>

    <div class="form-group">
      <label for="select" class="col-lg-2 control-label">Accompanying person</label>
      <div class="col-lg-10">
        <select ng-model="myVar" class="form-control" id="select">
          <option value="ppl0">Select</option>
          <option value="ppl1">1</option>
          <option value="ppl2">2</option>
          <option value="ppl3">3</option>
          <option value="ppl4">4</option>
          <option value="ppl5">5</option>
        </select>
      </div>
    </div>

    <!-- I want display this x3 if selct 3 selected -->
    <div id="persons">

      <div class="form-group">
        <label for="inputEmail" class="col-lg-2 control-label">Name</label>
        <div class="col-lg-10">
          <input class="form-control" id="inputEmail" placeholder="Name" type="text">
        </div>
      </div>
      <div class="form-group">
        <label for="inputEmail" class="col-lg-2 control-label">Subname</label>
        <div class="col-lg-10">
          <input class="form-control" id="inputEmail" placeholder="Subname" type="text">
        </div>
        <hr/>
      </div>
      <!-- End -->
    </div>
    <div id="npersons">

    </div>
    <div class="form-group">
      <div class="col-lg-10 col-lg-offset-2">
        <button type="reset" class="btn btn-default">Clear</button>
        <button type="submit" class="btn btn-primary">Send</button>
      </div>
    </div>
  </fieldset>
</form>

<强>更新

我建议去桌子上显示这些记录：https://jsfiddle.net/ha2o3zpq/4/＆lt; - 看看。只是个人意见。

Answer 2

据我所知，你不要在HTML中使用表单标签（这也是一个提交按钮）。如果你想显示它，表单标签应该导致一个带有FOR cicle的php文件。

如果选择值为x，则显示x输入

2 个答案: