javascript - Javascript onChange 下拉菜单

Question

我正在尝试调用 HTML Select 的 javascript 函数 onChange。

HTML 文档：

<select name="network" onChange="test(this)">
    <option value="net1">Net1</option>
    <option value="net2">net2</option>
</select>
<script>
    alert("test");
    var URLArray = [];
    function test(str){
        alert("test");
    }
</script>

我收到第一个警报，但没有收到第二个警报。我错过了什么？

编辑：代码实际上有效，但无论出于何种原因，我不能使用 JSFiddle 中的单独窗格。对此有什么想法吗？

Answer 1

当 jsFiddle 运行您的代码时，它会将其包装在一个闭包中，如下所示：

<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
    alert("test");
    var URLArray = [];
    function test(str){
        alert("test");
    }
}//]]>  
</script>

因此，您定义的“测试”函数永远不能作为全局函数使用，因此您放置在 select 标记上的内联 javascript 无法访问。

我强烈建议您学习使用 jQuery 来附加您的事件处理程序，如下所示：

<select name="network">
    <option value="net1">Net1</option>
    <option value="net2">net2</option>
</select>

$(function () {
    console.log("oh look, the document is ready");

    $("[name=network]").change(function () {
        console.log("now my code is groovy, but i might want to use an id rather than name selector"); 
    });
});

Answer 2

您的脚本没问题，您只需为两者输入相同的值（“test”）alert。

<script>
    alert("test1");
    var URLArray = [];
    function test(str){
        alert("test2");
    }
</script>

或者也许最终目标是这个......

function test(elm){
    alert(elm.value);
}

Answer 3

尝试将您的脚本移动到您的第一个电话上方，如下所示：

<script>
    alert("test");
    var URLArray = [];
    function test(str){
        alert("test");
    }
</script>


<select name="network" onChange="test(this)">
    <option value="net1">Net1</option>
    <option value="net2">net2</option>
</select>

这是jsfiddle，如您所见，我将 javascript 设置为放在标题中。

Answer 4

正如 Panayot 所说，您的代码还可以，但我宁愿使用console.log()而不是alert. 在控制台上查看比跟踪警报要容易得多。

<select name="network" onChange="test(this)">
    <option value="net1">Net1</option>
    <option value="net2">net2</option>
</select>
<script>
    console.log("test1")
    var URLArray = [];
    function test(str){
        console.log("test2");
    }
</script>