Add Configurable Product Options to the Category Listing Page in Magento 2

[ehsanahmed85]

i am trying to add configurable options to category listing in Magento 2, i am able to add the dropdown but it doesn't update the price and doesn't add the product directly to the cart. The code is added to the Catalog->templates->product->list.phtml how can we properly add the dropdown/or whole configurable block to the category listing page.

<?php
$_objectManager= \Magento\Framework\App\ObjectManager::getInstance();
$productTypeInstance = $_objectManager->get('Magento\ConfigurableProduct\Model\Product\Type\Configurable');
$productAttributeOptions = $productTypeInstance->getConfigurableAttributesAsArray($_product);
if (!empty($productAttributeOptions)) { //check if product has custom options. If it doesn't go to the next product
    foreach($productAttributeOptions as $productAttributeOption){
        ?>
        <p><span><?php echo $productAttributeOption['label']; ?></span></p>
        <select name="super_attribute[<?php echo $productAttributeOption['attribute_id'] ?>]" data-selector="super_attribute[151]" data-validate="{required:true}" id="attribute151" class="super-attribute-select" aria-required="true">
            <?php
            foreach($productAttributeOption['values'] as $configure_option)
            {
                ?>
                <option value="<?php echo $configure_option['value_index']; ?>"><?php echo $configure_option['label'] ?></option>
                <?php
            }
            ?>

        </select>
        <?php
    }
}
?>