Jquery Course

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
What attribute makes the input text box to not be modified by the user?
checked="checked" readonly="readonly" disabled="disabled"
<input type="text" value="fixed-value" readonly="readonly" name="a_name" />
What CSS property allows you to create rounded corners in your webpage design?
background-size border-size border-radius
.class {
  border:2px solid blue;
  border-radius:1.2em;
}
What instruction displays a confirmation dialog box to the viewer, who must then click OK or Cancel to proceed?
indexOf() confirm() prompt()
var ques = window.confirm("The result of 0+0 is 0?");
if (ques) alert("Corect");
else alert("Incorrect");
Indicate the PHP function that returns the lowest number of the parameter values.
floor() ceil() min()
$min_nr = min(12, 8, 25, 13);
echo $min_nr;        // 8
Select2 - jQuery replacement for select boxes

Last accessed pages

  1. Convert BBCode to HTML and HTML to BBCode with JavaScript (8176)
  2. How to use php variable in external js file (2318)
  3. Node.js Move and Copy file (24951)
  4. Detect when ScrollBar reaches the bottom of the page (3951)
  5. PHP Unzipper - Extract Zip, Rar Archives (22101)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (98)
  2. Read Excel file data in PHP - PhpExcelReader (81)
  3. SHA256 Encrypt hash in JavaScript (67)
  4. querySelector and querySelectorAll (50)
  5. SHA1 Encrypt data in JavaScript (49)