Select2 on existing select-dropdown

I had some issues with using Selct2 on an already existing select where the select attribute was already set. The problem was Select2 didn’t unselect the previously set option. To by-pass that I did this workaround.

To use Select2 check their installation guide here. When that is setup I used this jquery snippet where I;

  1. temporary save the previously set option
  2. removing that attribute from option
  3. init Select2 to the select element
  4. set the saved option again with the Select2 .val() function
jQuery(document).ready( function($) {
  
  // temporary save the current selected option
  selected = $("#my_select option:selected").val(); 
  
  // remove selected attribute to make default selected work
  $("#my_select option:selected").removeAttr("selected");
    
  // init select2
  $("#my_select").select2({
    minimumResultsForSearch: -1,
    multiple: false
  });

  // set default value again
  $("#my_select").val(selected); 

})

This is an example of previous select snippet where the second option is pre-selected.

<select id="my_select">
  <option value="my-first">First option</option>
  <option value="my-second" selected="selected">Second option</option>
</select>

Elementor Custom Modules

Creating lots of modules in you theme for Elementor? Do you want to skip the step of loading the files and classes manually? I use this code which makes things very handy, just create the php-file with the same name as the class and it will be loaded automagic.

class My_Elementor_Widgets_Loader {
  protected static $_instance = null;

  /* change path to the local directory where you put the elementor modules */
  private $path = "/php/elementor_widgets/";
  public static function instance() {
    if ( ! isset( self::$_instance ) ) {
      self::$_instance = new self();
    }
    return self::$_instance;
  }

  protected function __construct() {
    add_action( 'elementor/widgets/widgets_registered', [ $this, 'register_widgets' ], 99 );
  }

  public function register_widgets() {
    $this->include_widgets_files();
    /* register all classes (must be named as the php files) */
    foreach(glob(get_stylesheet_directory() . "/php/elementor_widgets/*.php") as $file) {
      $path_parts = pathinfo($file);

      /* change if using other namespace, or remove '__NAMESPACE__ .' if no namespace */
      $class_name = __NAMESPACE__ . '\\Widgets\\' . $path_parts['filename'];
      \Elementor\Plugin::instance()->widgets_manager->register_widget_type( new $class_name() );
    }
  }

  public function include_widgets_files() {
    /* load all php files */
    foreach(glob(get_stylesheet_directory() . $this->path . "*.php") as $file) {
      require_once($file);
    }
  }
}

My_Elementor_Widgets_Loader::instance();

Hope this will help you!