Change label text using JQuery

Question

I want the labels to change whenever the user changes from Metric to Imperial.

It correctly detects the change and stores the current value selected, steps into the if statement, but then nothing happens.

Here is my JavaScript.

$(document).ready(function() 
{   
    $("select[name = unit]").change(function()
    {
        var selected = $("option:selected", this).text();

        if(selected == "Metric (cm)")
        {
            $("label[for = unit]").text("mm");
        }
        else if(selected == "Imperial (inches)")
        {
            $("label[for = unit]").text("in");  
        }
    });
})

And my html.

    <form name ="Calculator">

        Unit of Measurement: 

        <select name = "unit">

            <option value = "120904000">
                Metric (cm)
            </option>

            <option value = "4760000">
                Imperial (inches)
            </option>

        </select>

        <br>


        Root Diameter: <input type = "text" name = "root" autocomplete = "off">
        <label for = "unit"></label>
        <br>

        Width between bearings: <input type = "text" name = "bearings" autocomplete = "off">
        <label for = "unit"></label>
        <br>

        End Fixity: 
        <select name = "fixity">

            <option value = ".36">
            1
            </option>

            <option value = "1.0">
            2
            </option>

            <option value = "1.47">
            3
            </option>

            <option value = "2.23">
            4
            </option>

        </select>

        <br>

        Max Speed (RPM): <input type = "text" name = "speed" autocomplete = "off"><br>

        <a href = "#" class = "reset" onclick = "">Reset</a>
        <a href = "#" class = "calculate" onclick = "checkOp(); return(false);">Calculate</a>
        <a href = "#" class = "close" onclick = "">Exit</a>

    </form>

Answer 1

I cant really guess where u missing.But check this js fiddle where i used your code and its working absolutely fine for me .

Your code Fiddle

$("select[name = unit]").change(function()
    {
        var selected = $("option:selected", this).text().trim();

        if(selected == "Metric (cm)")
        {
            $("label[for = unit]").text("mm");
        }
        else if(selected == "Imperial (inches)")
        {
            $("label[for = unit]").text("inches");  
        }   });

I updated the jsfiddle for you .You needed to add this trim at the end like this :

var selected = $("option:selected", this).text().trim();

and you set to go.

Here is updated jsfiddle :

updated code fiddle