说明
我需要实现，选择下拉列表中的值后，它应该自动创建新行，如下图所示。
示例
如果选择了选项 A，它应该生成行号(在本例中为 1)、包含所选值名称的标题列和 2 个输入字段(日期从＆日期到)，在它之后如果(例如)我们选择选项C它应该再生成1个新行，只是带有新的行号(在这种情况下将是2)
代码
简单的下拉列表:
<select>
<option value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
<option value="D">Option D</option>
</select>
我不知道如何实现它，我尝试过提高可见性，但离我需要的还很远......
还应将选定的选项插入到数据库中。
更新
同一选项不能选择两次，只能添加1次。如果单击错误，行附近还应该出现 X 以删除行。
行排序:
如果我选择C，之后是A，之后是D，它应该按顺序出现:
1. C [ ] [ ] X
2. A [ ] [ ] X
3. D [ ] [ ] X
如果我从列表中删除 A 它应该出现:
1. C [ ] [ ] X
2. D [ ] [ ] X -- this row number should change.
最佳答案
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$('#select_id').change(function () {
var szTr;
var iRowCount = 0;
var szSelectedText = $(this).find('option:selected').text();
if ($("#table tbody tr:has(td:eq(1):contains('" + szSelectedText + "'))").length > 0) {
alert("Duplicate!!!!")
return;
}
else {
iRowCount = $('#table tbody tr').length + 1;
szTr = "<tr>"
szTr = szTr + "<td>" + iRowCount + "</td>";
szTr = szTr + "<td>" + $(this).find('option:selected').text() + "</td>"
szTr = szTr + "<td><input type='text' class='date_from'></td>"
szTr = szTr + "<td><input type='text' class='date_to'></td>"
szTr = szTr + "<td class='delete'>Delete</td>"
szTr = szTr + "</tr>"
$('#table tbody').append(szTr)
}
});
$('#table').on('click','.delete',function () {
$(this).closest('tr').remove();
$('#btnSort').trigger('click');
});
function sortTable(table, order) {
tbody = table.find('tbody');
tbody.find('tr').sort(function (a, b) {
if (order == "asc") {
return $('td:eq(1)', a).text().localeCompare($('td:eq(1)', b).text());
} else {
return $('td:eq(1)', b).text().localeCompare($('td:eq(1)', a).text());
}
}).appendTo(tbody);
}
$('#btnSort').click(function () {
var iCounter = 1;
sortTable($('#table'), "asc")
$('#table tbody tr').each(function () {
$(this).find('td:eq(0)').text(iCounter);
iCounter = iCounter + 1;
});
});
});
</script>
</head>
<body>
<select id="select_id">
<option value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
<option value="D">Option D</option>
</select>
<table id="table" >
<thead>
<tr>
<td></td>
<td>title</td>
<td>Date from</td>
<td>Date to</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<input type="button" value="Sort Table" id="btnSort"/>
</body>
</html>
关于javascript - 选择值后的下拉列表创建新字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34948787/