Dropdown Dropdown is an advanced widget to select an item from a collection.

Basic

Editable

Content

Filter

Remote Function

Remote URL

PrimeElement

Dropdown is an advanced widget to select an item from a collection.

$('#basic').puidropdown();
                                
<select id="basic" name="basic">
    <option value="0">Select One</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

Local Data

var themes = new Array('afterdark', 'afternoon', 'afterwork', ...);
        
$('#custom').puidropdown({
    data: themes
});
                                
<select id="custom" name="custom"></select>

Remote Data

$('#rfn').puidropdown({
    data:  function(callback) {
        $.ajax({
            type: "GET",
            url: 'showcase/resources/data/options.json',
            dataType: "json",
            context: this,
            success: function(response) {
                callback.call(this, response);
            }
        });
    }
});
                                
<select id="rfn" name="rfn"></select>

Remote URL

$('#rurl').puidropdown({
    data: 'showcase/resources/data/options.json'
});
                                
<select id="rurl" name="rurl"></select>
Name Type Default Description
effect string fade Animation to run on displaying the options overlay, refer to jQuery UI effect api for valid values.
effectSpeed int/string normal Duration in milliseconds or keywords like slow, normal and fast.
filter boolean false Adds a filter input at options panel when enabled.
filterMatchMode string startsWith Mode of filter, valid values are startsWith, contains, endsWith and custom.
caseSensitiveFilter false boolean Defines case sensitivity on filtering.
filterFunction function null Function to be used in custom filtering, this function gets option as parameter and needs to return a boolean.
data array null An array of items to populate dropdown dynamically. Objects in this array can be simple types or object with label-value fields like {label:'Option 1', value:1}
content string null Content template of an item in overlay.
scrollHeight integer 200 Maximum height boundary of overlay panel in pixels, if total height of items exceed this value, scrollbar is displayed.
style string null Inline style of the element.
styleClass string null Style class of the element.
Name Parameters Description
change event: puidropdownchange event Fired on value change.
Name Parameters Description
getSelectedValue -. Returns value of current value.
getSelectedLabel -. Returns label of current option.
selectValue value: Value to select. Updates the current value with given parameter.
addOption label: Label of the option, value: Value of the option. Adds an option to the dropdown with given label value pair.
removeAllOptions -. Removes all options from the widget.
enable - Enable the widget
disable - Disable the widget.
getEditableText - Returns value of the editable field.
option name: Name of the option Returns the value of the option.
option name: Name of the option, value: Value of the option Set the value of the option.

Example

$('#basic').puidropdown('selectValue', 1);
                                
<script type="text/javascript">
    $(function() {
        var themes = new Array('afterdark', 'afternoon', 'afterwork', 'aristo', 'black-tie', 'blitzer', 'bluesky', 'bootstrap', 'casablanca', 'cruze',
        'cupertino', 'dark-hive', 'dot-luv', 'eggplant', 'excite-bike', 'flick', 'glass-x', 'home', 'hot-sneaks', 'humanity', 'le-frog', 'midnight',
        'mint-choc', 'overcast', 'pepper-grinder', 'redmond', 'rocket', 'sam', 'smoothness', 'south-street', 'start', 'sunny', 'swanky-purse', 'trontastic',
        'ui-darkness', 'ui-lightness', 'vader');

        $('#basic').puidropdown();

        $('#editable').puidropdown({
            editable: true
        });

        $('#custom').puidropdown({
            data: themes,
            content: function(option) {
                return '<img src="showcase/resources/demo/images/themes/' + option + '.png" alt="" /><span style="float:right;font-size:14px">' + option + '</span>';
            }
        });

        $('#filter').puidropdown({
            filter: true
        });
        
        $('#rfn').puidropdown({
            data:  function(callback) {
                $.ajax({
                    type: "GET",
                    url: 'showcase/resources/data/options.json',
                    dataType: "json",
                    context: this,
                    success: function(response) {
                        callback.call(this, response);
                    }
                });
            }
        });
        
        $('#rurl').puidropdown({
            data: 'showcase/resources/data/options.json'
        });                                     
    });
</script>
                                
<h3 class="title title-short" style="margin-top: 0px;">Basic</h3>
<select id="basic" name="basic">
    <option value="0">Select One</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

<h3 class="title title-short">Editable</h3>
<select id="editable" name="editable">
    <option value="0">Select a City</option>
    <option value="1">Barcelona</option>
    <option value="2">Berlin</option>
    <option value="3">Istanbul</option>
    <option value="4">London</option>
    <option value="5">New York</option>
    <option value="6">Paris</option>
    <option value="7">Rome</option>
</select>

<h3 class="title title-short">Custom Content</h3>
<select id="custom" name="custom" style="width: 180px;"></select>

<h3 class="title title-short">Filter</h3>
<select id="filter" name="filter">
    <option value="0">Select a City</option>
    <option value="1">Barcelona</option>
    <option value="2">Berlin</option>
    <option value="3">Istanbul</option>
    <option value="4">London</option>
    <option value="5">New York</option>
    <option value="6">Paris</option>
    <option value="7">Rome</option>
</select>

<h3>Remote Function</h3>
<select id="rfn" name="rfn"></select>

<h3>Remote URL</h3>
<select id="rurl" name="rurl"></select>

<h3>PrimeElement</h3>
<p-dropdown effect="fade" name="element" filter>
    <option value="0">Select a City</option>
    <option value="1">Barcelona</option>
    <option value="2">Berlin</option>
    <option value="3">Istanbul</option>
    <option value="4">London</option>
    <option value="5">New York</option>
    <option value="6">Paris</option>
    <option value="7">Rome</option>
</p-dropdown>

Usage

Dropdown is similar to a select element that requires options as children. 
<p-dropdown name="element" filter>
    <option value="0">Select a City</option>
    <option value="1">Barcelona</option>
    <option value="2">Berlin</option>
    <option value="3">Istanbul</option>
</p-dropdown>

Attributes

Name Type Default Description
id string null Identifier of the element.
name string null Name of the request parameter to be used in a form submission.
effect string fade Animation to run on displaying the options overlay, refer to jQuery UI effect api for valid values.
effectspeed int/string normal Duration in milliseconds or keywords like slow, normal and fast.
filter boolean false Adds a filter input at options panel when enabled.
filtermatchmode string startsWith Mode of filter, valid values are startsWith, contains, endsWith and custom.
casesensitivefilter false boolean Defines case sensitivity on filtering.
filterfunction function null Function to be used in custom filtering, this function gets option as parameter and needs to return a boolean.
scrollheight integer 200 Maximum height boundary of overlay panel in pixels, if total height of items exceed this value, scrollbar is displayed.
onchange function null Name of the function to invoke when value of dropdown changes.
style string null Inline style of the element.
styleclass string null Style class of the element.