Select2加载JSON数据异常求助：结果不显示问题排查

Hey there, I’ve been in your shoes before—nothing’s more frustrating than following the docs to the letter and still hitting a wall with Select2. Let’s break down the most common issues that cause this exact problem, and walk through fixes step by step.

You mentioned the developer console shows an exception—this is your biggest clue. Let’s decode what it might mean:

• If it’s a 404 Not Found error: Double-check the URL you’re requesting for JSON. Relative paths can be tricky, so try using an absolute path (like /api/options.json instead of options.json) to rule out path mismatches.
• If you see SyntaxError: Unexpected token < in JSON at position 0: Your server is returning HTML (like an error page or login prompt) instead of valid JSON. Pop open the Network tab in dev tools, look at the response content for your JSON request, and confirm it’s pure JSON.
• If it’s a CORS-related error (mentioning Access-Control-Allow-Origin): Your JSON file/endpoint is on a different domain than your page. Either move the JSON to the same domain, or configure your backend to send CORS headers.

Even if you followed the docs, it’s easy to miss a tiny detail. Select2 expects one of two formats:

Basic array format (for static or simple remote data) #

[
  {"id": 1, "text": "Option 1"},
  {"id": 2, "text": "Option 2"}
]

Paginated object format (for large datasets) #

{
  "results": [
    {"id": 1, "text": "Option 1"},
    {"id": 2, "text": "Option 2"}
  ],
  "pagination": {"more": false}
}

Key checks:

• The fields must be named id and text exactly—no substituting value, name, or custom labels unless you use the processResults function to map them.
• No trailing commas! JSON doesn’t allow a comma after the last item in an array/object—this is a super common gotcha.

Let’s make sure your setup is correct for your use case:

For local JSON data (loaded directly in your script) #

$(document).ready(function() {
  $('#your-select-element').select2({
    data: [
      {"id": 1, "text": "Option 1"},
      {"id": 2, "text": "Option 2"}
    ]
  });
});

For remote JSON data (loaded via AJAX) #

$(document).ready(function() {
  $('#your-select-element').select2({
    ajax: {
      url: 'path/to/your/json/endpoint',
      dataType: 'json', // Don’t skip this—tells Select2 how to parse the response
      processResults: function(data) {
        // Only use this if your JSON doesn’t use id/text fields directly
        return {
          results: data.map(item => ({
            id: item.your_id_field,
            text: item.your_label_field
          }))
        };
      }
    }
  });
});

Common mistakes here:

• Forgetting to wrap your initialization code in $(document).ready()—if your script runs before the <select> element exists, Select2 can’t attach to it.
• Missing dataType: 'json' in the AJAX config, which can cause Select2 to misinterpret the response.
• Not using processResults when your JSON uses custom field names instead of id/text.

• Make sure your <select> element has the correct id or class that matches your initialization selector.
• Ensure you’re only loading jQuery and Select2 once—duplicate script loads often cause weird conflicts.
• If you’re using a <select> with the multiple attribute, confirm your Select2 config doesn’t have conflicting settings (like maximumSelectionLength set to 1 by accident).

If you’re still stuck, strip everything down to a bare-bones page to eliminate outside interference:

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
  <select id="test-select"></select>

  <script>
    $(document).ready(function() {
      // First test local data
      $('#test-select').select2({
        data: [
          {"id": 1, "text": "Test Option 1"},
          {"id": 2, "text": "Test Option 2"}
        ]
      });

      // If local works, uncomment to test remote
      // $('#test-select').select2({
      //   ajax: {
      //     url: 'your-json-url-here',
      //     dataType: 'json'
      //   }
      // });
    });
  </script>
</body>
</html>

If this minimal page works, the problem is in your original codebase—start adding back parts of your code one by one to find the conflict.

内容的提问来源于stack exchange，提问作者Pedro Antônio