publik-base-theme/templates/qommon/forms/widgets/select--evaluation.html

33 lines
1.3 KiB
HTML

{% extends "qommon/forms/widget.html" %}
{% load qommon %}
{% block widget-control %}
<select style="display: none;" id="form_{{widget.name}}" name="{{widget.name}}"
{% for attr in widget.attrs.items %}{{attr.0}}="{{attr.1}}"{% endfor %}>
<option value="">---</option>
{% for option in widget.get_options %}
<option data-index="{{ forloop.counter }}" {% for attr in option.attrs.items %} {{attr.0}}="{{attr.1}}"{% endfor %}
>{{ option.description }}</option>
{% endfor %}
</select>
<div class="star-choice">
{% for option in widget.get_options %}
<span class="star" data-index="{{ forloop.counter }}"></span>
{% endfor %}
</div>
<script>
$(function() {
$('#form_{{widget.name}}').parent().find('.star-choice span').on('click', function() {
if ($(this).hasClass('selected')) {
$(this).nextAll().removeClass('selected');
} else {
$(this).prevAll().addClass('selected');
$(this).addClass('selected');
$(this).nextAll().removeClass('selected');
}
$('#form_{{widget.name}} option[data-index=' + $(this).data('index') + ']').prop('selected', true);
});
$('#form_{{widget.name}}').parent().find('.star-choice [data-index=' + $('#form_{{widget.name}} option:selected').data('index') + ']').trigger('click');
});
</script>
{% endblock %}