$.dropdown() creates dropdowns that integrate well with
$.urlfilter and $.urlchange.
It requires the bootstrap-select library and its dependencies.
<link
rel="stylesheet"
href="ui/bootstrap-select/dist/css/bootstrap-select.min.css"
/>
<script src="ui/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
Example:
<div class="container1"></div>
<script>
$(".container1").dropdown({ data: ["Red", "Green", "Blue"] });
</script>
This renders a dropdown with 3 options – Red, Green, Blue.
<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
If the labels are different from the values, you can use a list of
{value: ..., label: ...} objects.
<div class="dropdown-object"></div>
<script>
$('.dropdown-object').dropdown({
data: [{ label: 'Red', value: 1 }, { label: 'Green', value: 2 }]
])
</script>
The data objects need not use label: and value: as keys. You can pick any
other key using the label: and value: options.
<div class="dropdown-object"></div>
<script>
$('.dropdown-object').dropdown({
data: [{ x: 'Red', y: 1 }, { x: 'Green', y: 2 }],
label_key: 'x', // use data[*].x as the label, instead of data[*].label
value_key: 'y' // use data[*].y as the value, instead of data[*].value
])
</script>
You can set the default value of the dropdown using the value: key.
<div class="dropdown-default"></div>
<script>
$(".dropdown-default").dropdown({
key: "colors",
data: ["Red", "Green", "Blue"],
value: $("#color").val(url.searchKey.city), // Must match data string or .value
});
</script>
By default, the selected dropdown values are appended to URL query string. To append to the hash instead, use target: '#'.
<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'.
<div class="container4"></div>
<script>
$(".container4").dropdown({
key: "colors",
data: ["Red", "Green", "Blue"],
target: "pushState",
});
</script>
To use bootstrap-select options, use options:
<div class="container5"></div>
<script>
$(".container5").dropdown({
data: ["Red", "Green", "Blue"],
key: "colors",
options: {
style: "btn-primary",
liveSearch: true,
},
});
</script>
data: Array of values. Values may be strings, or objects. Objects have keys:label: text to display in the dropdownvalue: value to submit when item is selectedvalue: default selected value. This must match the value key in the data objecturl: End point that returns the data. If data: is also given, data takes priority.target: defines how URL is updated. Can be '' (Default), # or pushStatekey: key with which URL is updated.value_key: name of the key that defines the value in data: objects. Default: "value"label_key: name of the key that defines the label in data: objects. Default: "label"multiple: To render a dropdown that supports multi-select. Can be true or false (Default).options: Supports same options as bootstrap-select optionsload is triggered after dropdown is renderedchange is triggered whenever dropdown value is changed<div class="container6"></div>
<script>
$(".container6")
.on("load", function () {
// Your code here
})
.on("change", function () {
// Your code here
})
.dropdown({
key: "colors",
data: ["Red", "Green", "Blue"],
});
</script>