<species> 
  <select id='f_14' class='form-control medium species2'></select>
  <script>
    'use strict';
    riot.compile(() => {
      this.on('mount', () => {      
        $('#f_14').select2({
          dropdownParent: $('#addModal'),
          language: "ru",
          allowClear: true,
          placeholder: 'Выберите породу',
          ajax: {
            url: './php_scripts/add/get_species.php',
            dataType: 'json',
            data: function (params) {

              var queryParameters = {
                name: params.term,
                station_id: $('#f_3').val()
              }
              return queryParameters;
            },
            processResults: function (data) {
              return {
                results: $.map(data, (item) => {
                  return {
                    text: item.text,
                    children: $.map(item.children, (child) => {
                      return {
                        text: child.name,
                        id: child.id
                      }
                    })
                  }
                })
              }
            }
          }
        });

        $('#f_14').on('select2:select', (e) => {
          this.parent.tags.inspection_method.trigger('species', e.target.value)
        })

        $('#f_14').on('select2:unselect', () => {
          this.parent.tags.inspection_method.trigger('species', false)
        })
      })

      this.on('clear', () => {
        $('#f_14').val(null).trigger('change');
      })
    })

  </script>

  <style>
    li.loading-results {
      display: none;
    }

  .select2-container--default .select2-results>.select2-results__options {
    font-size: 12px;
    max-height: 410px;
  }

  </style>
</species>
