Question

I am trying to change the value of span when the user selects an option from the dropdown but this doesn’t seem to be working.

HTML:

<tr>
                    <td class="field" colspan="4">
                    <select id="mmt">
                    <option value="Metric" selected>METRIC</option>
                    <option value="English">ENGLISH</option>
                    </select></td>
                </tr>
                <tr>
                    <td class="head"><label for="abc">ABC</label></td>
                    <td class="field"><input type="text" id="abc"/><span class="m">MM</span> OD</td>
                    <td class="head"><label for="pqr"></label></td>
                    <td class="field"><input type="text" id="pqr" /><span class="ms">MM</span></td>
                </tr>
                <tr>
                    <td class="head"><label for="xyz">XYZ</label></td>
                    <td class="field"><input type="text"  id="xyz" /></td>
                    <td class="head"><label for="stu"></label></td>
                    <td class="field"><input type="text" id="stu"/><span class="ms">MM</span></td>
                </tr>

jQuery:

$(function() {          
                    $('#mmt').change(function() {
                        if ($('#mmt option:selected').text() == "English") {
                            $('.ms').text("INCH");
                        }
                        else {
                            $('.ms').text("MM")     
                        }

                    });

        });

Answer 1

$('#mmt option:selected').text() will either return "METRIC" or "ENGLISH", but never "English".

You want the value of the select element, not the text content of the selected option.
For that use $('#mmt').val() ^[docs], or simply $(this).val(), since this refers to the select element.

DEMO