使用JQuery更改标签文本

Question

我希望用户从公制切换到英制时标签能够改变。

它可以正确检测到更改并存储当前选择的值，进入if语句，但之后没有任何反应。

以下是我的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>

- stefanhorne

---

请将HTML代码也发布，因为那里有一些非常特定的字符串匹配。 - adeneo

我猜你实际上没有一个名为 for = unit 的属性，带有所有这些空格？ - adeneo

当我运行这个程序时，似乎更改所选项目确实更改了标签的文本。你想让它在标签中显示值+文本吗？例如120904000毫米？或4760000英寸？ - Aheinlein

我只希望它能够根据用户选择的测量单位显示“mm”或“in”。 - stefanhorne

那你的代码看起来不错。也许你可以编辑你的问题，把整个HTML和JavaScript都放上来？ - Aheinlein

Answer 1

我无法猜测你错过了哪里。但请检查这个js fiddle，我使用了你的代码，它对我来说完全正常工作。

你的代码 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");  
        }   });

我已经更新了 jsfiddle 的代码，你需要在最后添加这个 trim() 函数，像这样： ```` xxxxx.trim(); ```` 此函数可以去除字符串两端的空格。

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

准备好了。

这里是更新后的 jsfiddle ：

更新后的代码 fiddle

- surajRahel

---

它带有一些额外的空格，导致匹配选择器失败。因此，您需要修剪掉这些额外的空格，然后再进行比较以进行选择。 - surajRahel

@user3546428，你好，如果不使用trim函数，那么如果用户输入空格，则会处理空格。你想要空格吗？ - Pratik Joshi