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 a block element?
<div> <img> <span>
<div>Web Programming and Development</div>
Which CSS code displays the text underlined?
font-style: italic; text-decoration: underline; font-weight: 500;
h2 {
  text-decoration: underline;
}
Click on the JavaScript function that can access other function after a specified time.
insertBefore() setTimeout() querySelector()
function someFunction() { alert("CoursesWeb.net"); }
setTimeout("someFunction()", 2000);
Click on the instruction that returns the number of items of a multidimensional array in PHP.
count($array) count($array, 1) strlen()
$food =["fruits" =>["banana", "apple"), "veggie" =>["collard", "pea"));
$nr_food = count($food, 1);
echo $nr_food;       // 6
Select2 - jQuery replacement for select boxes

Last accessed pages

  1. innerHTML and outerHTML to Get and Replace HTML content (30627)
  2. Ajax-PHP Rating Stars Script (16836)
  3. Check if table exists in database (10119)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (142638)
  5. Add, Change, and Remove Attributes with jQuery (46367)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (641)
  2. The Mastery of Love (75)
  3. CSS cursor property - Custom Cursors (71)
  4. Read Excel file data in PHP - PhpExcelReader (67)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (48)