jQuery onchange选择选项

Question

假设我有以下HTML：

<select id='list'>
    <option value='1'>First</option>
    <option value='2'>Second</option>
    <option value='3'>Third </option>
</select> 
<input type ="text" id="text"/>

然后这个JavaScript

 //other variables are also declared here
    var x1 = 5;
    var x2 = 10;
    var value = x1 * x2;
    var list_value =$("#list").change(function() {
             $(this).val();
 // just an example of how i want the function in the variable 
    });
    var nwval = value * list_value;
      $('#text').val(nwval);
// some long piece of code 
// i'm also using the list_value value somewhere in the long piece of code..

我希望文本框中的val随着用户选择一个选项而改变，我知道如果将change事件包装在它周围就可以使用，但是在将其保留为变量list_value同时，有什么办法可以list_value ？

Answer 1

var x1 = 5;
var x2 = 10;
var value = x1 * x2;
var nwval;
$("#list").change(function() {
    nwval = value * $(this).val();
    $('#text').val(nwval);
});

Answer 2

$('#text').val($('option:selected').text());
$('#list').change(function(){

        $('#text').val($('option:selected').text());
})

从这里检查http://jsfiddle.net/QrHUN/

Answer 3

包装更改事件是更好的方法，因为它创建了一个闭包，您可以使用如下所示的全局变量，但是最好（imho）再次简单地获取该值。

从技术上讲，您可以这样做（尽管这是一个坏主意，因为它是全局变量）：

var x1 = 5;
var x2 = 10;
var value = x1 * x2;
var list_value = 1;
$("#list").change(function() {
    list_value = $(this).val();
    var nwval = value * list_value;
    $('#text').val(nwval); 
});

Answer 4

这将返回一个jQuery对象，而不是一个值。

var list_value =$("#list").change(function() {  

如果您想要代码之外的值，则需要执行以下操作

var list_value = 0;
var sel = $("#list").change(function() {
         list_value = $(this).val();
}).change();
var nwval = value * list_value;
$('#text').val(nwval);

但是onchange事件永远不会更新页面，只是该变量！