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
Which tag is used to include external CSS file in web page?
<body> <script> <link>
<link href="/templ/style.css" rel="stylesheet" type="text/css" />
Which CSS property sets the text size?
font-weight text-decoration font-size
h2 {
  font-size: 1em;
}
Indicate the JavaScript property that can add HTML code into an element.
text value innerHTML
document.getElementById("someID").innerHTML = "HTML content";
Click on the function that returns the number of characters of a string in PHP.
count() strlen() stristr()
$str = "http://CoursesWeb.net/";
$nr_chr = strlen($str);
echo $nr_chr;       // 22
Select2 - jQuery replacement for select boxes

Last accessed pages

  1. PHP Unzipper - Extract Zip, Rar Archives (25137)
  2. Inheritance - Parent class and Child class (5044)
  3. Functions - Advanced Use (468)
  4. Recursive function to create Multi-Level Menu in PHP (11216)
  5. Convert XML to JSON in PHP (11358)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (695)
  2. SHA256 Encrypt hash in JavaScript (425)
  3. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (412)
  4. SHA1 Encrypt data in JavaScript (383)
  5. Read Excel file data in PHP - PhpExcelReader (307)