我有这种模态形式，当有人在第二个选择中选择多个项目时，我想插入新字段，因此，如果我选择3个itens，则会动态地将3个新输入字段添加到表单中。
这是我的表格
<!--Nova visita-->
<div class="modal fade bs-example-modal-lg" id="myModalNovaVisita" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header card-infos">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3><i class="glyphicon glyphicon-plus-sign"></i> Registar Nova Visita de Estudo</h3>
</div>
<div class="modal-body">
<form id="novaVisita" method="post">
<div class="form-group">
<label for="recipient-name" class="control-label">Escola:</label>
<select class="form-control" id="idEscola" name="idEscola" required>
<option value="0">Escolha a escola desta visita</option>
<option value="1">Carmo</option>
<option value="2">Frei</option>
<option value="3">Santa Maria Maior</option>
</select>
</div>
<div class="form-group">
<label for="exampleInputFile">Turmas participantes na visita(tecla "shift" para seguidos, "ctrl"
para
separados)</label>
<select name="turmasVisitas[]" id="turmasVisitas" class="form-control" multiple="multiple" style="height: 100pt;" onchange="getCount();">
<option value=""></option>
</select>
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">Destino:</label>
<div class="input-group input-append date" id="localVisita">
<input class="form-control" name="novoDestino" id="novoDestino" placeholder="Destino desta visita">
<span class="input-group-addon add-on"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<label for="data">Data da partida:</label>
<div class="input-group input-append date" id="startDatePicker">
<input type="text" class="form-control" name="startDate" />
<span class="input-group-addon add-on"><i class="fa fa-calendar-check-o" aria-hidden="true"></i></span>
</div>
</div>
<div class="col-md-6">
<label for="data">Hora da partida:</label>
<div class="input-group input-append date" id="horaPartida">
<input type="text" class="form-control" name="part" onchange="validateHhMm(this)" />
<span class="input-group-addon add-on"><i class="fa fa-clock-o" aria-hidden="true"></i></span>
</div>
</div>
</div>
</div>
<div class="form-group">
<div id="ajaxDivErroHora" style="display:none" class="alert alert-danger"></div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<label for="data">Data do regresso:</label>
<div class="input-group input-append date" id="endDatePicker">
<input type="text" class="form-control" name="endDate" />
<span class="input-group-addon add-on"><i class="fa fa-calendar-check-o" aria-hidden="true"></i></span>
</div>
</div>
<div class="col-md-6">
<label for="data">Hora do regresso:</label>
<div class="input-group input-append date" id="horaChegada">
<input type="text" class="form-control" name="cheg" onchange="validateHhMm(this)" />
<span class="input-group-addon add-on"><i class="fa fa-clock-o" aria-hidden="true"></i></span>
</div>
</div>
</div>
</div>
<div class="form-group">
<div id="ajaxDivErroHora1" style="display:none" class="alert alert-danger"></div>
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">Professores Acompanhantes:</label>
<div class="input-group input-append date" id="acompanhantes">
<input class="form-control" name="acomp" id="acomp" placeholder="">
<span class="input-group-addon add-on"><i class="fa fa-user-circle" aria-hidden="true"></i></span>
</div>
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">Departamento(s):</label>
<select name="dpt[]" id="dpt" class="form-control" multiple="multiple" style="height: 100pt;">
<?php echo $optionDpt ?>
</select>
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">Áreas/Disciplinas Envolvidas:</label>
<div class="input-group input-append date" id="areas_disc">
<input class="form-control" name="areas" id="areas" placeholder="">
<span class="input-group-addon add-on"><i class="fa fa-bars" aria-hidden="true"></i></span>
</div>
</div>
<div class="form-group">
<label for="iti">Itinerário:</label>
<div class="input-group input-append date" id="itiVisita">
<textarea class="form-control" rows="2" id="iti" name="iti"></textarea>
<span class="input-group-addon add-on"><i class="fa fa-road" aria-hidden="true"></i></span>
</div>
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">Domínios (tecla "shift" para seguidos, "ctrl" para
separados):</label>
<select name="dominios[]" id="dominios" class="form-control" multiple="multiple" style="height: 100pt;">
<?php echo $optionDominios ?>
</select>
</div>
<div class="form-group">
<label for="iti">Plano de Ocupação(turmas não abrangidas pela vista):</label>
<div class="input-group input-append date" id="itiVisita">
<textarea class="form-control" rows="2" id="planoRecuperacao" name="planoRecuperacao"></textarea>
<span class="input-group-addon add-on"><i class="fa fa-list-alt" aria-hidden="true"></i></span>
</div>
</div>
<fieldset class="scheduler-border">
<legend class="scheduler-border card-infos">Transporte</legend>
<div class="row">
<div class="col-md-6">
<label for="notas">Tipo: </label>
<div class="form-group">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="optradio" id="optradio"
value="Autocarro Autarquia">Autocarro Autarquia
</label>
<label class="btn btn-default">
<input type="radio" name="optradio" id="optradio" value="Autocarro Alugado">Autocarro
Alugado
</label>
<label class="btn btn-default">
<input type="radio" name="optradio" id="optradio" value="Outros">Outros
</label>
</div>
</div>
</div>
<div class="col-md-3">
<label for="custo">Total Alunos:</label>
<div class="form-group">
<label class="form-inline">
<div class="input-group input-append date" id="totalVisita">
<input type="text" class="form-control" name="alunos"
placeholder="ex: 100"/>
<span class="input-group-addon add-on"><i class="fa fa-graduation-cap"
aria-hidden="true"></i></span>
</div>
</label>
</div>
</div>
<div class="col-md-3">
<label for="custo">Custo Individual:</label>
<div class="form-group">
<label class="form-inline">
<div class="input-group input-append date" id="custoVisita">
<input type="text" class="form-control" name="custo"
placeholder="ex: 20 €"/>
<span class="input-group-addon add-on"><i class="fa fa-eur"
aria-hidden="true"></i></span>
</div>
</label>
</div>
</div>
</div>
</fieldset>
<div class="form-group">
<label class="col-xs-12 control-label">Observações:</label>
<div class="col-xs-12">
<textarea rows="5" class="form-control" name="obs" id="obs"></textarea>
</div>
</div>
<br>
<div class="form-group">
<input type="hidden" class="form-control" name="userid" id="userid"
value="<?php echo $id_prof; ?>">
</div>
<div class="form-group">
<input type="hidden" class="form-control" name="novaVisita" id="novaVisita" value="novaVisita">
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success">Registar</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
</div>
</form>
</div>
</div>
</div>
</div>
我的javascript是这样的：
function getCount() {
var count = $("#turmasVisitas :selected").length;
console.log(count);
var i;
for (i = 0; i < count.length; i++) {
$('<input type="text"/>').appendTo('novaVisita');
}
}
此代码无效...
任何帮助。
答案 0 :(得分：0)
Optional.empty()，您忘记了.appendTo('#novaVisita')
否则它应该有用。
答案 1 :(得分：0)
您的代码几乎是正确的！你在那里有两个小虫子：
您应该在此行添加ID号#：
$('<input type="text"/>').appendTo('#novaVisita');
____________________________________^
从循环中删除length，因为count已经是一个数字：
for (i = 0; i < count.length; i++) {
_____________________^^^^^^^
应该是：
for (i = 0; i < count; i++) {
希望这有帮助。
function getCount() {
var count = $("#turmasVisitas :selected").length;
console.log(count);
var i;
for (i = 0; i < count; i++) {
$('<input type="text"/>').appendTo('#novaVisita');
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Nova visita-->
<div class="modal fade bs-example-modal-lg" id="myModalNovaVisita" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header card-infos">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3><i class="glyphicon glyphicon-plus-sign"></i> Registar Nova Visita de Estudo</h3>
</div>
<div class="modal-body">
<form id="novaVisita" method="post">
<div class="form-group">
<label for="recipient-name" class="control-label">Escola:</label>
<select class="form-control" id="idEscola" name="idEscola" required>
<option value="0">Escolha a escola desta visita</option>
<option value="1">Carmo</option>
<option value="2">Frei</option>
<option value="3">Santa Maria Maior</option>
</select>
</div>
<div class="form-group">
<select name="turmasVisitas[]" id="turmasVisitas" class="form-control" multiple="multiple" style="height: 100pt;" onchange="getCount();">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</form>
<br><br><br>
</div>
</div>
</div>
</div>