JSFiddle - React, Tailwind, and code Playground

HTML

<select>
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="defalut" disabled="disabled" selected="selected">Default</option>
    <option value="three">Three</option>
</select>
<select>
    <option value="defalut" disabled="disabled" selected="selected">Default</option>
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
</select>
<select>
    <option value="defalut">Default</option>
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
</select>
<br />
<button>reset</button>
<br />
<table>
    <tbody>
        <tr>
            <td><p class="select0"></p></td>
            <td><p class="select1"></p></td>
            <td><p class="select2"></p></td>
        </tr>
    </tbody>
</table>

CSS

td, select { width: 100px; }

JavaScript

$(document).on('click', 'button', function(e) {
    var opt = $('select').val(0).children('option').filter(function(i){ return this.hasAttribute('selected') });
    opt.prop('selected', 'selected');
        // if you have an expected event tied to the select's "change" event, you might fire it here, like so:
        $('select').change();
});

$('select').each(function(i) {
    $('.select' + i).text($(this).val() ? $(this).val() : $(this).find('option:selected').val());
})
.on('change', function(e) {
    $('.select' + $(this).index()).text($(this).val() ? $(this).val() : $(this).find('option:selected').val());
});