Question

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>

似乎不起作用。为什么？更改选择值时为什么不显示警报。

Answer 1

确保您引用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>

Answer 2

It works。你的问题可能在其他地方。

Answer 3

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

此外，还有一些更好的替代品可以获得价值，而不是使用.attr('value')（我不相信它甚至可以按你的意愿工作）。调用.val() jQuery函数（$(this).val()）或仅使用this.value直接访问属性。

Answer 4

你可以使用

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

Answer 5

<!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>

选择更改事件

5 个答案: