Question

我刚刚将查询库添加到我的网络应用程序并使用简单警报进行测试：

<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); 
});

下拉列表中的jQuery更改事件

4 个答案: