The Dropdown view


The Dropdown view displays a dropdown list with a set of choices. The list can be bound to a search manager, but can also be used as a standard HTML dropdown list that emits change events.


Library path

Simple XML wrapper



Default value


id Required. The unique ID for this control.
choices[]A static dictionary of options for the dropdown list. Must be set in JavaScript. If bound to a managerid, the static choices specified here are prepended to the dynamic choices from the search.
defaultThe default choice.
disabledfalseIndicates whether to disable the view.
labelField""The UI label to display for each choice.
manageridnullThe ID of the search manager to bind this view to.
minimumResultsForSearch8The minimum number of results.
selectFirstChoice"false"Indicates whether to use the first available choice when the user has not made a selection. If the default property has been set, that value is used instead.
showClearButtontrueIndicates whether to display that "x" next to choices, allowing a selection to be cleared.
valueThe value of the current choice.
valueField""The value or search field for each choice.
width200The width of the view, in pixels.




renderDraws the view to the screen. Called only when you create the view manually in JavaScript.
valReturns the view's value if passed no parameters. Sets the view's value if passed a single parameter.




changeFired when the value of the view changes.

Example (Django tag)

{% dropdown id="example-dropdown" managerid="example-search" default="main" %}

Example (JavaScript)

    var deps = [
    require(deps, function(mvc) {
        var DropdownView = require("splunkjs/mvc/dropdownview");
        var SearchManager = require("splunkjs/mvc/searchmanager");

        // Instantiate components
        new DropdownView({
            id: "example-dropdown",
            managerid: "example-search",
            default: "main",
            labelField: "index",
            valueField: "index",
            el: $("#mydropdownview")

        new SearchManager({
            id: "example-search",
            search: "| eventcount summarize=false index=* index=_* | dedup index | fields index" 


Code examples