# $.dropdown

`$.dropdown()` creates dropdowns that integrate well with
[$.urlfilter](#urlfilter) and [$.urlchange](#urlchange).

It requires the [bootstrap-select](https://silviomoreto.github.io/bootstrap-select/examples/)
library and its dependencies.

Example:

```html
<div class="container1"></div>
<script>
  $('.container1').dropdown({data: ['Red', 'Green', 'Blue'] })
</script>
```

This renders a dropdown with 3 options -- Red, Green, Blue.

```html
<div class="container2"></div>
<script>
  $('.container2').dropdown({ key: 'colors', data: ['Red', 'Green', 'Blue'] })
</script>
```

`key` enables urlfilter for dropdown. If Red option is selected from dropdown, URL is appended with `?colors=Red`

By default, the selected dropdown values are appended to URL query string. To append to the hash instead, use `target: '#'`.

```html
<div class="container3"></div>
<script>
  $('.container3').dropdown(
    { key: 'colors',
      data: ['Red', 'Green', 'Blue'],
      target: '#'
    })
</script>
```

To change URL without reloading the page, use `target: 'pushState'`.

```html
<div class="container4"></div>
<script>
  $('.container4').dropdown(
    { key: 'colors',
      data: ['Red', 'Green', 'Blue'],
      target: 'pushState'
    })
</script>
```

To use bootstrap-select options, use `options:`

```html
<div class="container5"></div>
<script>
  $('.container5').dropdown({
    data: ['Red', 'Green', 'Blue'], key: 'colors',
    options: {
      style: 'btn-primary',
      liveSearch: true
    }
  })
</script>
```


## $.dropdown options

- `data`: Array of values.
- `url`: End point that returns the `data`. If `data:` is also given, `data` takes priority.
- `target`: defines how URL is updated. Can be `''` (Default), `#` or `pushState`
- `key`: key with which URL is updated.
- `multiple`: To render a dropdown that supports multi-select. Can be `true` or `false` (Default).
- `options`: Supports same options as [bootstrap-select options](https://silviomoreto.github.io/bootstrap-select/options/)


## $.dropdown events

- `load` is triggered after dropdown is rendered
- `change` is triggered whenever dropdown value is changed

```html
<div class="container5"></div>
<script>
  $('.container5')
  .on('load', function() {
    // Your code here
  })
  .on('change', function() {
    // Your code here
  })
  .dropdown({
    key: 'colors',
    data: ['Red', 'Green', 'Blue']
  })
</script>

```