Why does Select2 not override the normal select boxes in Electron?

Question

Here is my code below:

<!DOCTYPE html>
<html>
<body>
 <select id="test">
  <option value="" selected=hidden>Select Product</option>
  <option></option>
 </select>
</body>
<script>
 window.$ = window.jQuery = require('jquery');
 require('select2')();

 $(document).ready(function(){
  let contents = ["A","B","C","D","E","F","G"];

  $("#test").select2({
   data:contents
  });
 });
</script>
</html>

I have installed both jquery and select2 as node modules. Jquery seems to work just fine. Here are photos of the electron output:

Two dropdowns appear Both can be interacted

Am I missing something simple? Thanks in advance.

Take a look at https://stackoverflow.com/questions/32621988/electron-jquery-is-not-defined — Leonardo Buscemi, May 28 '20 at 09:13
Can you try loading select2 externally through a url? Instead of through a node module. — Joshua, May 28 '20 at 11:38
@Joshua I was hoping to be able to use it offline. However, using a CDN just for Select2 does work. At least I now know jQuery probably wasn't the problem. — mat00, May 28 '20 at 12:16
Cool, what you can do then is download the `.js` file from the CDN and put it in the same folder as your `.html` file, then you can include it like: ``. And that way it'll work offline — Joshua, May 29 '20 at 02:11

score 0 · Accepted Answer · answered May 29 '20 at 02:27

You can install select2 manually insead of using NPM. This way you can use select2 offline.

Download the latest release of select2 (.zip) from: https://github.com/select2/select2/tags
Unzip the downloaded .zip and copy the necessary files from /dist.
Include these files in your .html file like:

<link href="path/to/select2.min.css" rel="stylesheet" />
<script src="path/to/select2.min.js"></script>

All done! Now select2 will work offline.

More details

Why does Select2 not override the normal select boxes in Electron?

1 Answers1