Swatches-from-select.js

{% capture image %}{{ 'test.png' | asset_url | split:'test.png' | first }}{% endcapture %}
	   var srcURL = '{{ image }}';     
//Swatch Script
      $('#wjFilterFront option').each(function(i){
        //generate the swatches and add matching data attributes to select options
       var imageName = $(this).val(); 
       var srcImage = 'https:' + window.srcURL + imageName + '.png';
        srcImage.toString();
       var index = i++; 
       var swatch = '<a class="swatch-link" href="javascript:void(0)" data-option-index="' + index.toString() +'"><img class="swatch-image" src="test.png" data-tag="' + imageName + '" ></a>'; 
         
      $(this).attr('data-option-index', index.toString());
      $(this).closest('.columns').append(swatch);
        //add the images to the swatches
	  $('.swatch-image[data-tag="' + imageName + '"]').attr('src', srcImage );
});
        //link the select and swatches     
    $('a[data-option-index]').click(function(e) {
    e.preventDefault();
    var dataSwatch = $(this).data('option-index');
	var dataOption = $("#wjFilterFront option").data('option-index');
    $("#wjFilterFront").find('option[data-option-index='+ dataSwatch +']').attr('selected','selected').siblings('option').removeAttr('selected');
;
      
        
});