下拉列表中的jQuery更改事件

Question

我剛剛將查詢庫添加到我的Web應用程序並使用簡單警報進行測試：

<script src="<c:url value="/resources/jquery-1.10.2.min.js" />"></script>
<script type="text/javascript">
            $(function(){
                alert('jquery is working');
            }); 
</script>

並且工作正常。 但是當我想在我的下拉列表中實現“更改”事件時

<script src="<c:url value="/resources/jquery-1.10.2.min.js" />"></script>
<script type="text/javascript">
        $("#projectKey").change(function() {
            alert($('option:selected', $(this)).text());
        });
</script>

它沒有顯示任何警報，基本上沒有任何事情發生。 我的下拉是以下內容：

<select id="projectKey" name="projectKey">
    <option value="AM">AM</option>
    <option value="AIL">AIL</option>
    <option value="NEB">NEB</option>
    <option value="SSP">SSP</option>
</select>

當然我試圖簡化javascript，只是有

$("#projectKey").change(function() {
            alert("test");
});

但仍然沒有快樂。 這將是選擇器或下拉菜單。 也試過“select＃projectKey”但結果當然是一樣的。 知道我做錯了什么嗎？

Answer 1

你應該保持DOM就緒功能

$(function() {
    $("#projectKey").change(function() {
        alert( $('option:selected', this).text() );
    });
});

如果您在DOM中的元素之前添加了javascript，則文檔尚未就緒，您必須使用DOM ready函數或在元素之后添加javascript，通常位置在</body>標記之前

Answer 2

請更改您的javascript函數，如下所示....

$(function () {
        $("#projectKey").change(function () {
            alert($('option:selected').text());
        });
    });

您不需要在警報中使用$(this) 。

Answer 3

或者你可以使用這個javascript

$(function () {
    $("#projectKey").change(function () {
        alert($('#projectKey option:selected').text());
    });
});

Answer 4

HTML

<select id="drop"  name="company" class="company btn btn-outline   dropdown-toggle" >
   <option value="demo1">Group Medical</option>
   <option value="demo">Motor Insurance</option>
</select>

的script.js

$("#drop").change(function () {                            
   var category= $('select[name=company]').val() // Here we can get the value of selected item
   alert(category); 
});