Я добавляю строки через jquery с одним полем в виде раскрывающегося списка (с опциями). Добавление и удаление строк отлично происходит, но опция для раскрывающегося поля не подходит. Пожалуйста помоги. попробовал jsfiddle http://jsfiddle.net/SqA9a/9/
HTML
<body>
<div id="page_container">
<div class="form_container">
<h3>Add and Delete rows dynamically with textboxes using jQuery:</h3>
<table id="expense_table" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>Sl. No</th>
<th>Mode</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="reg_no_01" maxlength="10" required />
</td>
<td>
<select name="mode" maxlength="10" required />
<option value="Select" selected>Select</option>
<option value="Auto">Auto</option>
<option value="Car">Car</option>
</td>
<td> </td>
</tr>
</tbody>
</table>
<input type="button" value="Add Row" id="add_ExpenseRow" />
</div>
<!-- END subject_marks -->
<div class="clearfix"></div>
</div>
<!-- FOOTER --> <a class="mm" href="http://mediamilan.com/" title="Go to Media Milan.com" target="_blank"></a>
</body>
jquery
$(function () {
// GET ID OF last row and increment it by one
var $lastChar = 1,
$newRow;
$get_lastID = function () {
var $id = $('#expense_table tr:last-child td:first-child input').attr("name");
$lastChar = parseInt($id.substr($id.length - 2), 10);
console.log('GET id: ' + $lastChar + ' | $id :' + $id);
$lastChar = $lastChar + 1;
$newRow = "<tr> \
<td><input type='text' name='reg_no_0" + $lastChar + "' maxlength='10' /></td> \
<td><select name='subjects_0" + $lastChar + "' maxlength='10' /> \
<option value='Select' selected>Select</option> \
<option value='Auto'>Auto</option> \
<option value='Car'>Car</option></select></td> \
<td><input type='button' value='Delete' class='del_ExpenseRow' /></td> \
</tr>"
return $newRow;
};
// ***** -- START ADDING NEW ROWS
$('#add_ExpenseRow').on("click", function () {
if ($lastChar <= 9) {
$get_lastID();
$('#expense_table tbody').append($newRow);
} else {
alert("Reached Maximum Rows!");
}
});
$(".form_container").on("click", ".del_ExpenseRow", function () {
$(this).closest('tr').remove();
$lastChar = $lastChar - 2;
});
});
Измените его на
<select name="mode" maxlength="10" required >
<option value="Select" selected>Select</option>
<option value="Auto">Auto</option>
<option value="Car">Car</option>
</select>
JQuery должен быть
$newRow = "<tr>
<td><input type='text' name='reg_no_0" + $lastChar + "' maxlength='10' /></td>
<td><select name='subjects_0" + $lastChar + "' maxlength='10' >
<option value='Select' selected>Select</option>
<option value='Auto'>Auto</option>
<option value='Car'>Car</option></select></td>
<td><input type='button' value='Delete' class='del_ExpenseRow' /></td>
</tr>"
return $newRow;
Вы заканчиваете тег select
в
<td><select name='subjects_0" + $lastChar + "' maxlength='10'/>
Таким образом, html игнорирует option
поскольку он будет вне select
. Должен быть
<td><select name='subjects_0" + $lastChar + "' maxlength='10' >
Проблема лежит в этой строке:
<td><select name='subjects_0" + $lastChar + "' maxlength='10' />
Добавив "/" в конце, вы закрываете тег select до того, как будут определены параметры. Вы должны удалить "/" и добавить "после опций".
Вы начали закрывать тег select в начале. заменить:
<td><select name='subjects_0" + $lastChar + "' maxlength='10' />
с
<td><select name='subjects_0" + $lastChar + "' maxlength='10' >
Вы немедленно закрываете тег.
использование
<td><select name='subjects_0" + $lastChar + "' maxlength='10' >
вместо
<td><select name='subjects_0" + $lastChar + "' maxlength='10' />