gpt4 book ai didi

javascript - 下拉选项未反射(reflect)在 html 中

转载 作者:行者123 更新时间:2023-12-02 17:30:31 25 4
gpt4 key购买 nike

我通过 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>&nbsp;</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>&nbsp;</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' >

关于javascript - 下拉选项未反射(reflect)在 html 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23109309/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com