javascript - jquery 从 select 标签中获取值并在点击函数中使用它

Question

我有一个下拉选择，我需要从中获取值并将其放入 glassCode 变量中。我可以获得该值并将其显示在更改事件内的警告框中。但是，当我尝试在更改事件之外使用它时，我什么也没得到。

<form id="form1" name="form1" method="post">
    <select id="glassProduct">
        <option value="GI032">GI032 CLEAR FLOAT 3.2MM</option>
        <option value="GI040">GI040 CLEAR FLOAT</option>
    </select>
    <input type="button" name="calculate" id="calculate" value="Calculate">
    <input type="reset" value="Clear" />
</form>

Jquery:

$("#glassProduct").change(function(){
    var glassCode=$(this).val();
    alert(glassCode);//this gives me the code
});//end of on change glassProduct

$("#calculate").click(function(){
    console.log("glass code: " +glassCode);//this gives me the same all the time
});

Answer 1

我想你应该了解 JavaScript 的作用域和作用域链

Understanding Scope and Context in JavaScript

你的代码的问题是 change 中的 glassCode 与 click 中的不在同一个范围内，尽管它们有同名。

所以Jquery应该是

var glassCode; // share the same scope in two function
$("#glassProduct").change(function(){
    glassCode=$(this).val();
    alert(glassCode);
});

$("#calculate").click(function(){
    console.log("glass code: " +glassCode);
});