jquery从select标签中获取值并在click函数中使用它

时间:2015-10-20 00:12:57

标签: javascript jquery

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

<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
});

4 个答案:

答案 0 :(得分:2)

我认为您应该了解Javascript的范围和范围链

Understanding Scope and Context in JavaScript

您的代码问题是glassCode中的changeclick中的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); }); 不在同一范围内,尽管它们具有相同的名称。

所以Jquery应该是

SET !VAR1 EVAL("var s1 = \"{{!EXTRACT}}\"; var s2 = s1.substring(s1.indexOf(\"herf=\")+6); s2.substring(0,s2.indexOf(\"\"))")

答案 1 :(得分:1)

如果您不需要在全局范围内使用glassCode变量,则无需存储它,只需使用选择的Jquery以获取选择的选择值:

    var glasscode;
    $("#calculate").click(function(){
      glasscode=$('#glassProduct option:selected').text()
      alert(glasscode);
    });

JSFIDDLE

答案 2 :(得分:0)

在回调函数中,您声明var glassCode=$(this).val()这是一个局部变量。在这种情况下,“Local”指的是回调函数本身。这也就是说变量超出了这个函数的范围。

要从另一个函数(如单击处理程序)中访问glassCode,您需要在具有全局范围的某个对象上定义它。最直接的方法是在全局window对象上定义它。然而,这通常是不受欢迎的,因为很容易使顶级对象与许多单个变量混杂在一起。解决方法是使用特定于您的应用程序的命名空间。请考虑一下:

$("#glassProduct").change(function(){
  glass = window.glass || {};
  glass.glassCode=$(this).val();
  alert(glassCode);
});//end of on change glassProduct

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

答案 3 :(得分:0)

<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>
var glassCode;

$("#glassProduct").change(function(){
 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
}); 

http://jsfiddle.net/Shilpa26/f7m94x9x/