kinolaev

Recently I found a better way to make multiple dropdown. You need to modify three files:

1) /wp-content/plugins/yith-woocommerce-ajax-navigation/class.yith-wcan-frontend.php:
— remove '.$suffix.' in

wp_enqueue_script( 'yith_wcan_frontend', YITH_WCAN_URL . 'assets/js/yith-wcan-frontend'.$suffix.'.js', array('jquery'), $this->version, true );

— and just after this string add chosen script and css with

wp_enqueue_style( 'yith_wcan_chosen', YITH_WCAN_URL . 'chosen/chosen'.$suffix.'.css', false, $this->version );
wp_enqueue_script( 'yith_wcan_chosen', YITH_WCAN_URL . 'chosen/chosen.jquery'.$suffix.'.js', array('jquery'), $this->version, true );

— download chosen and unpack it in /wp-content/plugins/yith-woocommerce-ajax-navigation/chosen/

2) /wp-content/plugins/yith-woocommerce-ajax-navigation/widgets/class.yith-wcan-navigation-widget.php in section if ( $display_type == 'list' ) {...}:
— replace

echo "<ul class='yith-wcan-list yith-wcan'>";

with

echo "<ul class='yith-wcan-list yith-wcan' style='display:none;'>";

— add

$selected = 'selected';

just after

$class = 'class="chosen"';

and

$selected = '';

just after

$class = '';

— replace

echo '<li ' . $class . '>';
  echo ( $count > 0 || $option_is_set ) ? '<a href="' . esc_url( apply_filters( 'woocommerce_layered_nav_link', $link ) ) . '">' : '<span>';
  echo $term->name;
  echo ( $count > 0 || $option_is_set ) ? '</a>' : '</span>';
  echo ' <small class="count">' . $count . '</small></li>';
}
echo "</ul>";

with

if ( $count > 0 || $option_is_set ) {
    echo '<li id="'.$taxonomy.'-'.$term->term_id.'" '.$class.'><a href="'.esc_url( apply_filters( 'woocommerce_layered_nav_link', $link ) ).'"></a></li>';
    $option .= '<option value="'.$taxonomy.'-'.$term->term_id.'" '.$selected.'>'.$term->name.'</option>';
  }
}
echo "</ul>";
$taxonomy_name = get_taxonomy($taxonomy);
$taxonomy_name = $taxonomy_name->labels->name;
echo "<select class='yith-wcan-dropdown yith-wcan' data-placeholder='".$taxonomy_name."' multiple>".$option."</select>";

3) /wp-content/plugins/yith-woocommerce-ajax-navigation/assets/js/yith-wcan-frontend.js:
— after

$('.woocommerce-info').wrap('<div class="yit-wcan-container"></div>');

add

var makeSelect = function(){
  $(".yith-wcan-dropdown").each(function(){
    var ov = $(this).val(); if ( ov == null ) ov = [];
    $(this).chosen({width: "100%"}).change(function(){
      var nv = $(this).val(); if ( nv == null ) nv = [];
      var item = ( nv.length > ov.length ) ? $(nv).not(ov).get(0) : $(ov).not(nv).get(0);
      $(this).parent().find('li#' + item + '>a').click();
    });
  });
}
makeSelect();

— and after

//load new widgets
$('.yith-woo-ajax-navigation').each(function(){
  var id = $(this).attr('id');
  $(this).html( $(response).find('#'+id).html() );
  if( $(this).text() == '' ) {
    $(this).hide();
  } else {
    $(this).show();
  }
});

add

makeSelect();

It’s all.