选择更改事件

JS选择更改事件

$(document).ready(function() { 

$('#issue_no').change(function() 
{ 
    alert('Value change to ' + $(this).attr('value')); 
}); 

});

HTML

<select id='issue_no' name='issue_non'> 
    <option value='_empty' selected='selected' style='display:none;'></option> 
    <option value="ABC">Vol 1, No 1 (2012): Journal of JISRComputing</option> 
</select>

似乎没有工作。为什么？更改选择值时为什么不显示警报。

来源

2012-05-09 SupaOden

你说的 “不工作” 是什么意思？它没有提醒任何事情，还是提醒错误的价值？ –

没有提示。只是更新后。 – SupaOden

确保您引用的jQuery：

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>

包装你的代码在一个现成的函数：

$(function(){ 
    /* Code Here */ 
});

一定要检查你的id和正确结构的标记：

<select id='issue_no' name='issue_non'> 
    <option value='_empty' selected='selected' style='display:none;'></option> 
    <option value="ABC">Vol 1, No 1 (2012): Journal of JISRComputing</option> 
</select>

写格式良好的JavaScript以方便阅读：

$(function(){ 
    $("#issue_no").on("change", function(){ 
     alert(this.value); 
    }); 
});

这一切后，它的工作原理：http://jsbin.com/obadub/edit#javascript,html

与往常一样，请确保您不会有问题的其他地方您的网页上。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Alert Selected Value</title> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script> 
    <script> 
    $(function(){ 
     $("#issue_no").on("change", function(){ 
     alert(this.value); 
     }); 
    }); 
    </script> 
    </head> 
    <body> 
    <select id='issue_no' name='issue_non'> 
     <option value='_empty' selected='selected' style='display:none;'></option> 
     <option value="ABC">Vol 1, No 1 (2012): Journal of JISRComputing</option> 
    </select> 
    </body> 
</html>

来源

2012-05-09 13:41:09 Sampson

我不知道问题出在哪里，但是在你的帖子后面，我设法解决了这个问题。 – SupaOden

It works。你的问题可能在别处。

来源

2012-05-09 13:36:41 karim79

它已经包装在ready函数中。 – SupaOden

您可能需要使用$(document).ready(function() {...});（或其简写形式$(function() {...});），或者只需将该脚本移动到页面底部，即在正文标签（</body>）之前。

此外，有很多更好的替代方法来获取价值，而不是使用.attr('value')（我不相信甚至会按你的意愿工作）。调用.val() jQuery函数（$(this).val()）或直接访问属性，使用this.value。

来源

2012-05-09 13:38:30

您可以像使用

$(function() { 
    $('#issue_no').on("change", function() 
    { 
     alert('Value change to ' + $(this).val()); 
    }); 
});

来源

2012-05-09 13:39:28

如果您使用jQuery 1.7 + *，尽管它们在功能上是等价的（'.change（）'会在传递函数时在jQuery代码中调用'.on（）'），您可以*。 –

我没有看到使用最新版本的jquery的问题...这是更好的，因为将解决很多问题，并使用新功能 –

个人而言，我不能保证，如果我更新到最新版本，什么都不会破坏，我没有时间回去重新测试（然后可能修复）这段代码量。 –

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#issue_no').on('change', function() { 
       alert('Value change to ' + $(this).attr('value')); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <select id='issue_no' name='issue_non'> 
     <option value='_empty' selected='selected' style='display: none;'></option> 
     <option value="ABC">Vol 1, No 1 (2012): Journal of JISRComputing</option> 
    </select> 
</body> 
</html>

来源

2012-05-09 13:41:56 Thulasiram

http://jsfiddle.net/nanoquantumtech/Bu2xr/ – Thulasiram

如果你追加下拉列表。那么你需要使用'开'。 – Thulasiram

如果您动态追加元素，那么您的代码无法工作，这是一个标准事件绑定到代码运行时假定存在的元素，**不是**动态元素的事件委派。另外，句子开始以大写字母和“你”和“是”真的不是很长的话 - 不要偷懒，键入出来，它使一个更好的印象。 –

选择更改事件

回答

相关问题