you have to override your default list.phtml file with your module.
replace your if else conditonal block,
<?php if ($_product->isSaleable()): ?>
<?php $postParams = $block->getAddToCartPostParams($_product);
?>
<form data-role="tocart-form" action="<?php echo $this->getBaseUrl().'checkout/cart/add/product/'.$postParams['data']['product']//echo $postParams['action']; ?>" method="post">
<input type="hidden" name="product" value="<?php /* @escapeNotVerified */ echo $postParams['data']['product']; ?>">
<input type="hidden" name="<?php /* @escapeNotVerified */ echo Action::PARAM_NAME_URL_ENCODED; ?>" value="<?php /* @escapeNotVerified */ echo $postParams['data'][Action::PARAM_NAME_URL_ENCODED]; ?>">
<!-- <input type="hidden" class="super1" name="super_attribute[90]" value="">
<input type="hidden" class="super2" name="super_attribute[137]" value=""> -->
<?php echo $block->getBlockHtml('formkey')?>
<button type="submit"
title="<?php echo $block->escapeHtml(__('Add to Cart')); ?>"
class="action tocart primary">
<span><?php /* @escapeNotVerified */ echo __('Add to Cart') ?></span>
</button>
</form>
<?php else: ?>
<?php if ($_product->getIsSalable()): ?>
<div class="stock available"><span><?php /* @escapeNotVerified */ echo __('In stock') ?></span></div>
<?php else: ?>
<div class="stock unavailable"><span><?php /* @escapeNotVerified */ echo __('Out of stock') ?></span></div>
<?php endif; ?>
<?php endif; ?>
Add javascript inside below,
<script type="text/javascript">
require(["jquery"],function($){
jQuery(window).load(function(){
jQuery('.swatch-option').click(function(){
var optionid = jQuery(this).attr('option-id');
var contextClass = jQuery(this).parents('.swatch-attribute').parent().attr('class');
var getProductId = contextClass.replace ( /[^\d.]/g, '');
var currentAttributeid = jQuery(this).parents('.swatch-attribute').attr('attribute-id');
var formAction = jQuery('.'+contextClass).siblings('.product-item-inner').find("form input[name='super_attribute["+currentAttributeid+"]']").val(optionid);
});
jQuery('.product-item-inner form').each(function(){
var getId = jQuery(this).find("input[name='product']").val();
//check for swatch is available or not?
if(jQuery('.swatch-opt-'+getId).length > 0){
console.log('getProductid '+getId);
var getLength = jQuery('.swatch-opt-'+getId).children().length;
var domInput = '';
for(inc = 0; inc < getLength; inc++){
var getAttributeId = jQuery('.swatch-opt-'+getId).children().eq(inc).attr('attribute-id');
console.log('getAttributeId '+getAttributeId);
domInput += "<input type='hidden' value='' name='super_attribute["+getAttributeId+"]'>";
}
jQuery('.swatch-opt-'+getId).siblings('.product-item-inner').find('form').append(domInput);
} //if end here
});
});
});
</script>
Thanks.