Populating DropDown With jQuery And AJAX - selectAjax

File Size: 2.62 KB
Views Total: 2832
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Populating DropDown With jQuery And AJAX - selectAjax

selectAjax is a very small jQuery plugin that automatically populates select options with JSON-encoded data via AJAX requests.

How to use it:

1. Download and insert the JavaScript file selectajax.js after jQuery library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="selectajax.js"></script>

2. Fetch the data from a data sourcea and populate the select dropdown with key/value pairs as follows:

<select id="example">
  
</select>
$('#example').getOptions({
  url: "/path/to/data.json",
  key: "key",
  val: "value"
});

3. Customize the first option.

$('#example').getOptions({
  url: "/path/to/data.json",
  key: "key",
  val: "value",
  firstOption: {
    key: "Select An Option",
    val: ""
  }
});

This awesome jQuery plugin is developed by asiftyro. For more Advanced Usages, please check the demo page or visit the official website.