我有一个选择框，在选择“其他”选项后，将显示第二个选择框(超过 10k 的巨大列表)。这在 IE 和 Mozilla 中运行良好，但在 Chrome 中会遇到未捕获的 rangeError。我该如何调试和解决这个问题？
<!DOCTYPE html>
<html>
<body>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#thisIsTheSelectBox').change(function() {
var otherSelectBoxId = $(this).attr('id') + "xyz123";
if ($(this).val() === "Others") {
var otherSelectBox = "<select id='" + otherSelectBoxId + "' name='' unit='' uniquename='' class=' ' required='true'> " +
"<option value='option 1'>option 1</option>" +
"<option value='option 2'>option 2</option>" +
...
"<option value='option 10000'>option 10000</option>" +
"</select>";
$(this).after(otherSelectBox);
} else {
$("#" + otherSelectBoxId).remove();
}
});
});
</script>
</head>
<table>
<tr>
<td width="330" valign="top">
<select id="thisIsTheSelectBox" name="" required="true">
<option value=''>-- Options --</option>
<option value='1'>test1</option>
<option value='2'>test2</option>
<option value='Others'>Others</option>
</select>
</td>
</tr>
</table>
</body>最佳答案
这可能是内部错误。您可以在一个循环中添加每个元素，而不是构建一个长字符串，这样代码会更轻便且更易于维护。
代码:
$(document).ready(function () {
$('#thisIsTheSelectBox').change(function () {
var otherSelectBoxId = $(this).attr('id') + "xyz123";
if ($(this).val() === "Others") {
var otherSelectBox = "<select id='" + otherSelectBoxId + "' name='' unit='' uniquename='' class=' ' required='true'> ";
for (var i = 0; i <= 10000; i++) {
otherSelectBox += "<option value='option" + i + "'>option " + i + "</option>";
}
otherSelectBox += "</select>";
$(this).after(otherSelectBox);
} else {
$("#" + otherSelectBoxId).remove();
}
});
});
关于javascript - jQuery 巨大的选择框导致 Uncaught RangeError : Maximum call stack size exceeded，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28494063/