Lava Shortcode - Dropdown

Description

Create a standard dropdown menu for single-option selection.

Documentation

This control displays a dropdown list with the option to enable support for longer lists.

Example Usage

{[ dropdown label:'Favorite Number' name:'favorite-number' longlistenabled:'true' isrequired:'true' value:'2' ]}
    [[ item value:'1' text:'One' ]][[ enditem]]
    [[ item value:'2' text:'Two' ]][[ enditem]]
    [[ item value:'3' text:'Three' ]][[ enditem]]
{[ enddropdown ]}

Parameters

Below are the parameters for the dropdown shortcode.

• label - The label to display above the control.
• showlabel (true) - Whether to display label.
• name (dropdown) - The name for the drop down control.
• value - The ID or Guid of the currently selected value.
• longlistenabled (false) - Enhances the functionality to include a search feature, facilitating swift and efficient selection of the preferred item from the list.
• controltype (rock-drop-down-list) - The type of control. This is appended to the root form-group.
• isrequired (false) - Establishes whether making a selection is necessary.
• validationmessage (Please select an item.) - Message to display when the value is not valid.
• additionalattributes - Additional attributes to include on the input control.

The above settings enable a wide range of filtering options for the list. Regardless of the filter configurations, the current value will consistently be shown.

Markup

{% assign isrequired = isrequired | AsBoolean %}
{% capture id %}rc-{{ '' | UniqueIdentifier }}{% endcapture %}

{[ rockcontrol id:'{{ id }}' label:'{{ label }}' showlabel:'{{ showlabel }}' controltype:'{{ controltype }}' isrequired:'{{ isrequired }}' validationmessage:'{{ validationmessage }}' ]}
    <select name="{{ name }}" id="{{ id }}" class="form-control {% if longlistenabled == 'true' %}chosen-select chosen-select-absolute {% endif %}" {% if isrequired == true %}required{% endif %} {{ additionalattributes }}>

        {% for item in items %}
            <option value="{{ item.value }}" {% if item.value == value %}selected="selected"{% endif %}>{{ item.text }}</option>
        {% endfor %}

    </select>
{[ endrockcontrol ]}

{% if longlistenabled == 'true'%}
    <script> 
    (function() { 
        var $chosenDropDowns = $('#{{ id }}');
        if ($chosenDropDowns.length) {
            if (document.activeElement && !document.activeElement.nodeType) {
                $('body').trigger('focus');
            }
        
            $chosenDropDowns.chosen({
                width: '100%',
                allow_single_deselect: true,
                placeholder_text_multiple: ' ',
                placeholder_text_single: ' '
            });
        
            $chosenDropDowns.on('chosen:showing_dropdown chosen:hiding_dropdown', function (evt, params) {
                // update the outer modal
                Rock.dialogs.updateModalScrollBar(this);
            });
        
            var $chosenDropDownsAbsolute = $chosenDropDowns.filter('.chosen-select-absolute');
            if ($chosenDropDownsAbsolute.length) {
                $chosenDropDownsAbsolute.on('chosen:showing_dropdown', function (evt, params) {
                    $(this).next('.chosen-container').find('.chosen-drop').css('position', 'relative');
                });
                $chosenDropDownsAbsolute.on('chosen:hiding_dropdown', function (evt, params) {
                    $(this).next('.chosen-container').find('.chosen-drop').css('position', 'absolute');
                });
            }
        }
    })();
    </script>
{% endif %}