Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.

Features

- Enhancing native selects with search.
- Enhancing native selects with a better multi-select interface.
- Loading data from JavaScript: easily load items via AJAX and have them searchable.
- Nesting optgroups: native selects only support one level of nesting. Select2 does not have this restriction.
- Tagging: ability to add new items on the fly.
- Working with large, remote datasets: ability to partially load a dataset based on the search term.
- Paging of large datasets: easy support for loading more pages when the results are scrolled to the end.
- Templating: support for custom rendering of results and selections.
- Fully skinnable, easy to customize it and integrate in your theme.

Using Select2

1. Include the ".css" and ".js" Select2 files in the <head> section of your HTML.
- You can use the "cdnjs" repository:
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
- Or, you can use the code locally, from your server.
In this case, Download the code, copy the "select2/" directory in your server, and add this code in the <head> section of the HTML page:
<link href="select2/css/select2.min.css" rel="stylesheet" />
<script src="select2/js/select2.min.js"></script>
You must have the jQuery included Before the Select2 files.
2. Initialize Select2 on the <select> element that you want to make awesome:
<script>
$('select').select2();
</script>
In the archive for the Download link there are two different Select2 builds:
- Standard (select2.js / select2.min.js) - It includes the most commonly used features.
- Full (select2.full.js / select2.full.min.js) - Use this build if you need the additional features from Select2, like the compatibility modules or recommended includes like jquery.mousewheel.

Examples

1. Single select dropdown list with search field.
Select: 
<select class="select" name="sel1">
<option value="v1">Alabama</option>
<option value="v2">Alaska</option>
<option value="v3">California</option>
<option value="v4">Nevada</option>
<option value="v5">New Mexico</option>
<option value="v6">Oklahoma</option>
<option value="v7">Oregon</option>
<option value="v8">Washingon</option>
</select>
<script>
$('select').select2();
</script>
Demo:
Select:
2. Multi-value select boxes; by using the multiple attribute. Placeholder, and limiting the number of selections (here 3).
<select style="width:280px;" class="multi_sel" multiple="multiple" name="sel2">
<option value="v1">Alabama</option>
<option value="v2">Alaska</option>
<option value="v3">California</option>
<option value="v4">Nevada</option>
<option value="v5">New Mexico</option>
<option value="v6">Oklahoma</option>
<option value="v7">Oregon</option>
<option value="v8">Washingon</option>
</select>
<script>
$('.multi_sel').select2({
  placeholder: 'Select a state',
  maximumSelectionLength: 3
});
</script>
Demo:
3. Tagging support with automatic tokenization, with comma and space separator. Responsive design - Percent width.
Select: 
<select style="width:70%;" class="tokenizer_sel" multiple="multiple" name="sel3">
<option value="v1">Alabama</option>
<option value="v2">Alaska</option>
<option value="v3">California</option>
<option value="v4">Nevada</option>
<option value="v5">New Mexico</option>
<option value="v6">Oklahoma</option>
<option value="v7">Oregon</option>
<option value="v8">Washingon</option>
</select><br><br>
<script>
$('.tokenizer_sel').select2({
  placeholder: 'Select a state',
  tags: true,
  tokenSeparators: [',', ' ']
});
</script>
Demo:
- Try typing in the search field below and entering a space or a comma.
Select:
4. Loading <option>s dinamically, with data from a javascript array.
Select: 
<select class="js_sel" name="sel4"></select><br><br>
<script>
var sel_data =[{id:0, text:'option-1'}, {id:1, text:'script'}, {id:2, text:'jquery'}, {id:3, text:'valid'}, {id:4, text:'fixed'}];
$('.js_sel').select2({
  placeholder: 'Select an option',
  data: sel_data
});
</script>
Demo:
Select:

Resources

1. Select2 home page
2. Examples - Select2

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag can be used to embed an external application (SWF, PDF) in web page?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Which CSS pseudo-element adds a special style to the first line of a text?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
}
Click on the window object property which gets or sets the URL of current page.
window.location window.self window.status
var url = window.location;
alert(url);
Indicate the PHP function used to get the contents of a file or page and store it into a string.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://coursesweb.net/");
echo $homepage;
Select2 - jQuery replacement for select boxes

Last accessed pages

  1. PHP getElementById and getElementsByTagName (32807)
  2. Node.js Move and Copy file (13787)
  3. insertAdjacentHTML - Insert content at a specified position (2422)
  4. Contact page - CoursesWeb (27249)
  5. SHA512 Encrypt hash in JavaScript (14406)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1321)
  2. Contact page - CoursesWeb (1292)
  3. Tabs effect with CSS (1289)
  4. PHP getElementById and getElementsByTagName (589)
  5. Get Attribute (ID, Class, Name, Title, Src) with jQuery (488)