Select2 - jQuery replacement for select boxes

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

<<-Fancy-Fields Custom Forms Look

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which attribute specifies the HTTP method (GET, POST) used to submit the form-data?

action method value

<form action="script.php" method="post"> ... </form>

Which CSS property allows to add shadow to boxes?

background-image box-shadow border-radius

#id {
  background-color: #bbfeda;
  box-shadow: 11px 11px 5px #7878da;
}

Which function removes the first element from an array?

pop() push() shift()

var fruits = ["apple", "apricot", "banana"];
fruits.shift();
alert(fruits.length);           // 2

Indicate the function that can be used to check if a PHP extension is instaled.

function() filetype() extension_loaded()

if(extension_loaded("PDO") === true) echo "PDO is available."

Select2 - jQuery replacement for select boxes

Jquery Course

Features

Using Select2

Examples

Resources

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Last accessed pages

Popular pages this month