jQuery huge selectbox result in Uncaught RangeError: Maximum call stack size exceeded

Question

我有一个 select 框，在选择 "Others" 选项后，将显示第二个 select 框（超过 10k 的巨大列表）。这在 IE 和 Mozilla 中工作正常，但在 Chrome 中遇到未捕获的范围错误。我该如何调试和解决这个问题？

<!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>

Answer 1

这可能是内部错误。您可以在循环中添加每个元素，而不是构建一个长字符串，这样代码会更轻便，更易于维护。

代码：

$(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();
        }
    });

});

演示：http://jsfiddle.net/IrvinDominin/4gk5zd5t/

jQuery huge selectbox result in Uncaught RangeError: Maximum call stack size exceeded

jQuery huge selectbox result in Uncaught RangeError: Maximum call stack size exceeded

html

javascript

jquery

google-chrome

drop-down-menu