【发布时间】：2016-10-20 00:58:44
【问题描述】：
编辑：
感谢mohd afzal 它创建了下拉菜单，但我仍然有一些错误：
- 布局并非应有的样子（见图）
- 在您选择第一个下拉列表中的值后，创建的第二个下拉列表没有响应。
我遵循了这个，它有效，但给我带来了不同的问题。 (Add multiple fields to form)
当前问题：
- 我得到的是输入文本字段，而不是我创建的下拉菜单
- 布局混乱（见图）（我需要额外的字段作为我的下拉框，并且金额字段应该使用相同的代码，因此只允许使用数字）
- id 和 realName 未显示在图像中以防止显示名称
点击“添加更多”之前的表单图像。
使用代码：
jQuery
<script>
$(function() {
$("#addMore").click(function(e) {
e.preventDefault();
$("#fieldList").append("<li> </li>");
$("#fieldList").append("<li><input type='text' name='ddl[]' placeholder='Choose a project' /></li>");
$("#fieldList").append("<li><input type='text' name='ddl2[]' placeholder='Choose a date' /></li>");
$("#fieldList").append("<li><input type='text' name='amount[]' placeholder='Amount' /></li>");
});
});
</script>
HTML
<form action="<? echo $_SERVER['PHP_SELF']; ?>" method="POST" name="contact">
<div class="row uniform 50%">
<div class="6u 12u(mobilep)">
Your personal card number
<input type="text" name="card2" id="card" value="<?php echo $_SESSION['username']; ?>" placeholder="Card Number" readonly/>
</div>
<div class="6u 12u(mobilep)">
Your name
<input type="text" name="name2" id="name" value="<?php echo $_SESSION['realName']; ?>" placeholder="Your name" readonly/>
</div>
</div>
<div class="row uniform 50%">
<div class="6u 12u(narrower)">
Order tickets for a project.
</div>
</div>
<div class="row uniform 50%" id="fieldList">
<div class="4u 12u(narrower)">
<select name="ddl[]" id="ddl[]" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
<option disabled selected>Select a project</option>
<option value="Smile">Project Smile</option>
<option value="Sand">Project Sand</option>
<option value="Schmuck">Project Schmuck</option>
</select>
</div>
<div class="4u 12u(narrower)">
<select id="ddl2[]" name="ddl2[]">
<option disabled selected>Select a date</option>
</select>
</div>
<div class="2u 12u(narrower)">
<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' name="amount[]" id="amount[]" value="" placeholder="Amount" />
</div>
</div>
<div class="row uniform">
<div class="12u">
</div>
</div>
<div class="4u 12u(mobilep)">
Total price.(In EUR)
<input type="text" name="total2" id="total" value="" readonly/>
</div>
<div class="row uniform">
<div class="12u">
<ul class="actions align-center">
<li><input type="submit" name="submit"value="Place Order"/></li>
</ul>
</div>
</div>
</form>
【问题讨论】：
-
您正在附加到
#fieldList的li元素，该元素不存在（只有“下订单”按钮被li包围）。我想说用一个名为“行字段”的 div 包装三个 div 元素（4u 12u 更窄，4u 12u 更窄，2u 12u 更窄）。然后检查 uit jQuery 的clone函数以在单击时复制此 div。
标签： jquery html contact-form