Question

我正在替换我对ajax回调的选择。在下拉列表中，我看到了返回的列表，但是当我尝试绑定更改事件时，它给了我不正确的值。警报显示我＆＃34;值未定义＆＃34;，当我在下拉列表中更改所选选项时，如何查看正确的值？

如果我的下拉列表中包含值（＆＃34; value1＆＃34;，＆＃34; value2＆＃34;，＆＃34; value3＆＃34;），如果我选择＆＃34; value1＆＃34;，警报应该显示我＆＃34;值是值1＆＃34;。

if (status == "success") {

    var mysel = $('#Namelist').empty();


    for (var i = 0; i < data.length; i++) {
        mysel.append('<option value="' +
            data[i] + '">' +
            data[i] + '</option>');
    }

    $("#Namelist").replaceWith(mysel);
    $('#Namelist').bind('change', function () {
        alert('Value change to ' + $(this).attr('value'));
    });
}

Answer 1

您应该尝试获取val()而不是attr('value')：

<强> DEMO

$('#Namelist').bind('change', function () {
        alert('Value change to ' + $(this).val());
});

Answer 2

替换

$("#Namelist").replaceWith(mysel);

与

$("#Namelist").append(mysel);

然后，您不必在event之后再次#Namelist ajax。

完整代码

if (status == "success") {
    var options = '';

    for (var i = 0; i < data.length; i++) {
        options += '<option value="' + data[i] + '">' + data[i] + '</option>';
    }

    $("#Namelist").html(options);
}

// Outside of ajax function
$('#Namelist').on('change', function () {
    alert('Value change to ' + $(this).val());
});

Answer 3

<select>元素通常没有名为value的属性。要获取此类元素的选定值，您需要查询其.value属性。

jQuery有一个方便的包装器，名为.val()：

$('#Namelist').bind('change', function () {
    alert('Value change to ' + $(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Namelist" />

我建议只在页面中绑定一次更改处理程序，例如当DOM准备就绪时：

jQuery(function($) {
    // attach change handler here
});

多次注册同一个事件处理程序几乎总是不是你想要的。

此外，您不需要此电话：

$("#Namelist").replaceWith(mysel);

到那时，select元素已经填充了AJAX响应中的所有选项。

Answer 4

提示从ajax回调中删除onChange事件是好的。

Moved the $('#Namelist').on('change',function () {} from ajax callback 

to jQuery(function($) {}); 



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

在ajax返回时绑定onChange

4 个答案: