DerDu/SPHERE-Framework

<div class="form-group {{ ElementGroup }}">
    {% if( ElementLabel is not empty ) %}
        <label for="{{ ElementName }}">{{ ElementLabel }}{% if( Required is not empty ) %}<span
                    class="text-danger"> *</span>{% endif %}</label>
    {% endif %}
    {% if( ElementIcon is not empty ) %}
    <div class="input-group">
        <span class="input-group-addon">
            {{ ElementIcon }}
        </span>
        {% endif %}
        <select id="{{ ElementName }}" name="{{ ElementName }}"
                {% if( Disabled is not empty ) %}disabled{% endif %} {% if( TabIndex is not empty ) %}tabindex="{{ TabIndex }}"{% endif %}>
            {% for Value, Title in ElementData %}
                <option value="{{ Value }}">{{ Title }}</option>
            {% endfor %}
        </select>
        {{ ElementFeedbackIcon }}
        {% if( ElementIcon is not empty ) %}
    </div>
    {% endif %}
    {{ ElementFeedbackMessage }}
</div>
<script type="text/javascript">
    //noinspection JSUnresolvedFunction
    executeScript(function () {
        Client.Use('ModSelect2', function () {
            var guiSelect = jQuery('select[name="{{ ElementName }}"]');
            guiSelect.find('option[value="{{ ElementValue }}"]').attr('selected', 'selected');
            guiSelect.ModSelect2({{ ElementConfiguration }});
            guiSelect.on('change keyup blur', function () {
                if( guiSelect.val() == 0 ) {
                    guiSelect.next().find('span.select2-selection__rendered').css('color','silver');
                } else {
                    guiSelect.next().find('span.select2-selection__rendered').css('color','');
                }
            });
            if( guiSelect.val() == 0 ) {
                guiSelect.next().find('span.select2-selection__rendered').css('color','silver');
            }
            guiSelect.next().find('span.select2-selection__arrow b').css('border-top-color','silver');

// TODO: on demand option Tab-Open
//            guiSelect.data().select2.on("focus", function () {
//                guiSelect.select2("open");
//            });

            // Fix: (Hack) respect Tab-Index
            guiSelect.on('select2:close', function(e) {
                $LiveElement = $(this).closest($('select[name ="'+e.currentTarget.name+'"'));
                var setfocus = setTimeout(function() {
                    $LiveElement.select2('focus');
                }, 10);
            });
        });
    });
</script>