選擇更改事件

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

如果您動態追加元素，那麼您的代碼無法工作，這是一個標準事件綁定到代碼運行時假定存在的元素，**不是**動態元素的事件委派。另外，句子開始以大寫字母和「你」和「是」真的不是很長的話 - 不要偷懶，鍵入出來，它使一個更好的印象。 –

選擇更改事件

回答

相關問題