How to Use select2.js

petarap picture petarap · Jan 28, 2013 · Viewed 63.2k times · Source

I want to add a form field which can auto fill text & can take multiple tabs(similar to fb). I found select2.js helps me do it, But i am having problems in using it when i set multiple attribute to true. if i add multiple: true, the page dispalys it as a normal select.

I find documentation on select2 page confusing.

I am a new to all of them, Please help me out.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>          
<script type="text/javascript" src="select2.js"></script>          

 <link href="select2.css" rel="stylesheet"/>
    <script src="select2.js"></script>
    <script>
        $(document).ready(function() { 
        $("#e1").select2([multiple: true]);
        });
    </script>

</head>
<body>
<input type="button" id="123">click
</br>
<input type="hidden" id="1234">
<select id="e1">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>

        <option value="WY">Wyoming</option>
    </select>

</body>
</html>

Answer

MarcusAsplund picture MarcusAsplund · Jan 29, 2013

Add the attribute "multiple", and a width as well, only in the markup.

<select multiple id="e1" style="width:300px">

and js as this:

$(document).ready(function() { 
 $("#e1").select2();
});

See fiddle here: http://jsfiddle.net/marcusasplund/jEADR/2/

A side note; you are loading select2.js 2 times in the code posted in your question.