select2 | jQuery based replacement for select boxes | Plugin library

....



...

var mydata = [{id: 0, text: "aa"}, ..... ...... {id: 10000, text: "aa 10000"}];

    function formatState(state) {
        if (!state.id) { return state.text; }
        var output = $('');   // I would like get data `text[1]` of `processResults` here.
        return output;
    };

    //more code here

    cellEle.html(``);
    
    let selectEle = cellEle.children("select").select2({

        //more code here
        
        ajax: {

            //more code here

            processResults: function (data) {                
                var options = [];
                if (data) {
                    $.each(data, function (index, text) {
                        options.push({ id: index, text: text[0]});
                    });
                }
                return {
                    results: options,
                    more: false
                };
            },
        },
        templateSelection: formatState,
    });

"scripts": {
              "start": "gulp watch"
    },
"dependencies": {
        "@fortawesome/fontawesome-free": "5.15.1",
        "@ttskch/select2-bootstrap4-theme": "^1.5.2",
        "bootstrap": "4.5.3",
        "bootstrap-datepicker": "^1.9.0",
        "jquery": "3.5.1",
        "jquery.easing": "^1.4.1",
        "select2": "^4.1.0-rc.0",
        "gulp": "4.0.2"
    },
    "devDependencies": {
        "browser-sync": "2.26.13",
        "del": "6.0.0",
        "gulp": "4.0.2",
        "gulp-autoprefixer": "7.0.1",
        "gulp-clean-css": "4.3.0",
        "gulp-header": "2.0.9",
        "gulp-plumber": "^1.2.1",
        "gulp-rename": "2.0.0",
        "gulp-sass": "4.1.0",
        "gulp-uglify": "3.0.2",
        "merge-stream": "2.0.0"
    }

function add_defer_attribute($tag, $handle) {
    print('hi');
    echo('hi');

   // add script handles to the array below
   $scripts_to_defer = array('jquery-core-js','fortuna.lib-js');
   
   foreach($scripts_to_defer as $defer_script) {
       
      if ($defer_script === $handle) {
         return str_replace(' src', ' defer="defer" src', $tag);
      }
   }
   return $tag;
}

add_filter('script_loader_tag', 'add_defer_attribute', 10, 2);

function add_async_attribute($tag, $handle) {
    print('hello');
    echo('hello');
   // add script handles to the array below
   $scripts_to_async = array('jquery-core-js', 'fortuna.lib-js');
   
   foreach($scripts_to_async as $async_script) {
      if ($async_script === $handle) {
         return str_replace(' src', ' async="async" src', $tag);
      }
   }
   return $tag;
}

add_filter('script_loader_tag', 'add_async_attribute', 10, 2);

(function($) {  
  $(document).ready(function() {
    $(".volunteer").on("click", function (event) {

      let element_id = event.target.id;
      // Check if select is already loaded
      if (!$(this).has("select").length) {
        var cellEle = $(this);

        // Populate select element
        cellEle.html(``);

        // Initialise select2
        let selectEle = cellEle.children("select").select2({
          allowClear: true,
          maximumSelectionLength: 3,
          ajax: {
            url: "/wordpressbosta/matt/wp-admin/admin-ajax.php",
            dataType: 'json',
            data: function (params) {
              return { 
                        action: 'get_data',
                    };
            },
            type: "post",
            processResults: function (data) { 
              var options = [];
              if ( data ) {
                $.each( data, function( index, text ) {
                  options.push({ id: index, text: text });
                });
              }
              return {
                results: options
              };
            }
          }
        });

        selectEle.select2('open');

        $.ajax({
          type: "POST",
          dataType: 'json',
          url: "/wordpressbosta/matt/wp-admin/admin-ajax.php",
          data: { 
            element_id: element_id,
            action: 'get_preselect_values',
          },
          success: function (data) {
            var options = [];
              
            if (data) {
              $.each( data, function( index, text ) {
                options.push({ id: index, text: text });
              });
            }
            
            selectEle.val(options).trigger('change'); // I am trying to attach value here. But it is not working. 
          }
        });


        selectEle.on('select2:select', function () {
          $.ajax({
            type: "POST",
            dataType: 'jsonp',
            url: "/wordpressbosta/matt/wp-admin/admin-ajax.php",
            data: { 
              selected_items: selectEle.val(),
              element_id: element_id,
              action: 'save_data'
            }
          });
        });

        selectEle.on("select2:unselecting", function () {
          $.ajax({
            type: "POST",
            dataType: 'jsonp',
            url: "/wordpressbosta/matt/wp-admin/admin-ajax.php",
            data: { 
              selected_items: selectEle.val(),
              task_id: element_id,
              action: 'save_data'
            } 
          });
        }).trigger('change');
      }
    });
  });
})(jQuery)

$(".js-country-list").select2({
  templateResult: formatState
});

#bap + .select2 .select2-selection__rendered {
  background-color: yellow;
}

/* Each result */
#select2-bap-results {
  background-color: salmon;
}

/* Higlighted (hover) result */
#select2-bap-results .select2-results__option--highlighted {
  background-color: rgb(5, 27, 27) !important;
}

/* Selected option */
#select2-bap-results .select2-results__option[aria-selected="true"] {
  background-color: rgb(13, 14, 14) !important;
}

/* Around the search field */
.select2-search {
  background-color: orange;
}

/* Search field */
.select2-search input {
  background-color: pink;
}

  
  
  


  
  



  






    
        Alabama
        Wyoming
        Wyoming
        Wyoming
    
 


 
 
 

function submit() { let total=0; document.querySelectorAll('select').forEach(element => { total += parseInt(element.value); }); console.log(total); }


console.log = function(message) {
document.getElementById('result').innerHTML = message;};
console.log('');

 
 
 1. Did you attend summer training?

    
        NO
        YES
    


 2. Have you passed all your grades?

    
        NO
        YES
    


 3. Have you completed summer assignments?

    
        NO
        YES
    


Submit
    
 
    

document.addEventListener('turbolinks:load', selectTags)

$(document).ready(selectTags)

function selectTags() {
  $('#post_tag_ids').select2({
      createTag: function (params) {
        return {
          id: $.trim(params.term) + '#(new)',
          text: $.trim(params.term)
        }
    },
    ajax: {
        url: '/tags/search',
        dataType: 'json',
        delay: 200,
        data: function (params) {
          return {
            q: params.term
          }
        },
        processResults: function (data, params) {
            data.map(v => {v.text = v.name})
          return {
            results: data
        }
        },
          cache: true
        },
        tags: true,
      minimumInputLength: 2,
      maximumInputLength: 20
    })
}

  def create
    @post = Post.new(post_params)
    set_post_defaults

    respond_to do |format|
      if @post.save
        format.html { redirect_to @post, notice: "Post was successfully created." }
        format.json { render :show, status: :created, location: @post }
      else
        format.html { render :new, status: :unprocessable_entity }
        format.json { render json: @post.errors, status: :unprocessable_entity }
      end
    end
  end

  def post_params
    params.require(:post).permit(:category_id, :title, :content, :tag_list, :tag, { tag_ids: [] }, :tag_ids)
  end