Login / Join
Select2 Simple Example
submitted on 30/03/2017 by
Codicode
+ infos
Config
Embed
Share
Select2 Simple Example
by
Codicode
How to implement a select2 element on a classic html select list with a search functionality.
Framework 1 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
Framework 2 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
+ Js file(s) :
https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js
+ Css file(s) :
https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css
Apply
Link :
Direct http link :
Fork button :
Html code :
Embed preview :
Copy the following html code to your page to embed the preview,
To include many previews on a single page, just repeat the first line.
You can change the width, height and border color (bcolor).
<div class="refork-widget" code="985" style="width:100%;height:200px;" bcolor="#ccc"></div>
<script type="text/javascript" src="//snippet.run/d/z.js"></script>
HTML
<select class="courntyselect"> <option></option> <option value="1">USA</option> <option value="2">France</option> <option value="3">Tunisia</option> <option value="4">Canada</option> </select>
CSS
body{ padding : 20px; }
Javascript
$(".courntyselect").select2({ width: "250", placeholder: "Select your country", }).on("change",function(e){ alert('Selected value : ' + e.target.value); });
©2013 Copyright snippet.run
Privacy
-
Terms of use
-
About
-
Contact