'How to make select2 work and get multiselect?

I added these links into my head tag:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
And I'm trying to get nultiselect here:
            <div>
                <select id="state" name="state" multiple>
                    <option></option>
                    <option value="AL">Alabama</option>
                    <option value="MY">Wyoming</option>
                </select>
            </div>
            <script type="text/javascript">
                jQuery(document).ready(function() {
                jQuery('#state').select2({
                    placeholder: "Select a state",
                    allowClear: true
                });
                });
            </script>

But I don't get the needed result. It's just a normal select type.How should I make it work?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source