Question

我正在开发一个使用bootstrap的项目。在项目中，需要一些额外的功能，以便当用户从下拉列表中选择某个选项时，它会隐藏/显示某些内容。它看起来如下：

<select class="form-control" id="state-text" onChange="test()" name="selected-state" >
      <!-- Select options here -->
</select>

然后我有JS如下：

function test()
{
  // Code here
}

现在这不起作用，并且会抛出一个未定义功能测试的错误。但是，当我用以下内容重新编写它时：

test = function test()
{
    //Code here
}

它按预期工作。我不明白为什么一个人工作而另一个人没有工作？是否可能与引导文件导入的其他JS文件有关？

Answer 1

尽量避免在HTML中间添加JS。试着这样做：

$(document).ready(function() {
    $('#state-text').on('change', function () {
        //Code Here
    });
});

我在这里假设您正在使用jQuery，因为它是bootstrap的要求。如果没有，请告诉我。

Answer 2

当你将这个问题标记为jQuery时，我很快就做了一个小提琴

http://jsfiddle.net/nYmF8/

标记

<select class="form-control" id="state-text" name="selected-state" >
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="b">C</option>
</select>

jquery

$(function(){$('#state-text').on('change', function () {
    alert('changed value to  to '+$(this).val());
});});

也许你忘了把你的jQuery放在the document ready function?

中

Javascript仅在将变量赋值给函数时有效吗？

2 个答案: