JSFiddle - React, Tailwind, and code Playground

by Mike McCaughan

HTML

<table>
    <tbody>
        <tr class="amcom-grid-row amcom-grid-row-readonly">
            <td><button class="toggler">Toggle</button></td>
            <td>
                <div class="field-select-readonly">
                    <select class="grid-select field-readonly" readonly="readonly">
                        <option>Words, words, words</option>
                        <option>Text, text, text</option>
                    </select>
                    <div class="field-select-readonly-text"></div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

CSS

.amcom-grid-row.amcom-grid-row-readonly select.field-readonly { 
    display: none; 
}
.amcom-grid-row.amcom-grid-row-readonly .field-select-readonly-text { 
    display: block; 
    font: 13px/1.2 Arial; 
    margin: 2px; 
    padding: 2px 5px; 
}
.amcom-grid-row select.field-readonly { 
    display: inline-block; 
}
.amcom-grid-row .field-select-readonly-text { 
    display: none; 
}

JavaScript

$('.field-select-readonly').each(function () {
    var $this = $(this),
        $select = $this.find('select.field-readonly'),
        text = $select.find('option:selected').text(),
        $field = $this.find('.field-select-readonly-text');
    $field.html(text);
});
$('.toggler').click(function () {
    var $tr = $(this).parents('tr');
    $tr.toggleClass('amcom-grid-row-readonly');
});
$('select.field-readonly').change(function () {
    $(this).parents('.field-select-readonly').find('.field-select-readonly-text').html($(this).find('option:selected').text());
});