Select element in HTML document not displaying

Question

I'm trying to use the Select2 library. But I haven't been able to get anything to show up. Even when I tried this simple example, it didn't work. The HTML file, CSS file and JS file are all in the same folder.

When I load this the browser is totally blank.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <link href="select2.css" rel="stylesheet" />
    <script src="select2.js"></script>
</head>
<body>
    <div class="controls-group">
        <div class="controls">
            <script type="text/javascript">
                $(".example-basic-multiple").select2();
                <select class="example-basic-multiple" multiple="multiple">
                    <option value="AL">Alabama</option>
                    <option value="WY">Wyoming</option>
                </select>
            </script>
        </div>
    </div>
</body>
</html>

I'm not familiar with jQuery or the select2 library but shouldn't you have your ` — TylerH, Feb 24 '15 at 20:06
They were answered, I forgot to remove that from the question. — Brent Connor, Feb 25 '15 at 20:09

score 2 · Accepted Answer · edited Feb 25 '15 at 19:08

2

You need to put the <select> outside of the script tag, preferably in the <head>, after linking to the JS libraries :

       <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>title</title>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
            <link href="select2.css" rel="stylesheet" />
            <script src="select2.js"></script>
            <script> 
                $(function() {//Waits until the page is fully loaded before running code
                $(".example-basic-multiple").select2();
                });
            </script>
        </head>
        <body>
            <div class="controls-group">
                <div class="controls">                        
                    <select class="example-basic-multiple" multiple="multiple">
                        <option value="AL">Alabama</option>
                        <option value="WY">Wyoming</option>
                    </select>
                </div>
            </div>
        </body>
        </html>

edited Feb 25 '15 at 19:08

Brent Connor

628
2
8
23

answered Feb 24 '15 at 20:07

Jacob G

13,762
3
47
67

1

How about putting the HTML before the script that is supposed to access it? – ErikE Feb 24 '15 at 20:09
@ErikE edited it, just said to put it in the head, its easiest :D – Jacob G Feb 24 '15 at 20:11
This was the fix. I was following the examples at https://github.com/select2/select2/blob/select2-ng/docs/examples.html and they the select tags inside the script tags. – Brent Connor Feb 24 '15 at 20:15
Like @ErikE said though, its only working for me if I put the script after the select tag. Could someone help me understand that? And also why in the link I provided they have it setup differently and its still working for them? – Brent Connor Feb 24 '15 at 20:18
1

@BrentConnor I created [a pull request for the author to fix his code](https://github.com/select2/select2/pull/3066). – ErikE Feb 24 '15 at 20:23
2

@BrentConnor As the browser parses the DOM, it *runs* any script elements it finds *as it's parsing*. This means that when the script element is parsed, and run, if the `select` element comes later in the DOM, there *is* no `select` element yet to operate on. – ErikE Feb 24 '15 at 20:26
@ErikE I think in the docs he said he doesn't respond to pull requests about the docs. – Brent Connor Feb 24 '15 at 20:27
@BrentConnor Not sure where we mention not accepting docs PRs, but it should say _the exact opposite_. – Kevin Brown-Silva Feb 24 '15 at 21:51
@ErikE The browser will only parse ` – Kevin Brown-Silva Feb 24 '15 at 21:54
@KevinBrown https://github.com/select2/select2/tree/select2-ng/docs "Pull requests will usually be ignored, documentation fixes should be made in the source repository. We may accept pull requests if they match the source docs directory, but for the most part pull requests will be closed on sight." – Brent Connor Feb 24 '15 at 21:56
@BrentConnor Ah, my bad. That's intended for the [docs repo](https://github.com/select2/select2.github.io) and I can clarify it to make that more obvious. – Kevin Brown-Silva Feb 24 '15 at 21:57
@KevinBrown The requirement for `type="text/javascript"` *used* to be true, but it's not any more. Please try it out, yourself! – ErikE Feb 24 '15 at 22:01
@ErikE [This SO question](http://stackoverflow.com/q/4912586/359284) might be a useful read. Let's pull up a chat room if there is going to be further discussion, so we don't clutter these comments. – Kevin Brown-Silva Feb 24 '15 at 22:06
Note for future readers. `` will indeed be parsed and run by the browser. – ErikE Feb 25 '15 at 00:14
@BrentConnor to fix your problem with the code only working if placed after, see my updated answer – Jacob G Feb 25 '15 at 18:34

Select element in HTML document not displaying

1 Answers1