Question

这就是我的HTML看起来的样子，我正在使用它来循环它们。不是主要问题。

 <select id='stat'>

    <option selected='selected' disabled></option> 
    <option value=Paid>Paid</option>
    <option value=UnPaid>UnPaid</option>
    </select>
    </td>   
</tr>
</select>


<select id='stat'>

    <option selected='selected' disabled></option> 
    <option value=Paid>Paid</option>
    <option value=UnPaid>UnPaid</option>
    </select>
    </td>   
</tr>
</select>

这是我的ajax / jquery，我的代码适用于第一个选择但是在下一个选择等等..更改事件不再起作用。它只适用于我的第一个选择。

$(function () {
    $('select#stat').change(function () {
        var xz = $(this).parents('tr').attr('id');
        $.ajax({
            type: 'POST',
            url: '../post.php',
            data: {
                x: 'x',
                idx: xz,
                status: $('select#stat').val()
            },
            success: function () {
                alert('Status Changed');
            }
        });
    });
});

Answer 1

id应该是唯一的，因此您不能拥有多个具有相同ID的元素。

相反，请使用class。

在HTML

中

<select class="stat"></select>

要在javascript文件中引用它，请使用

$(".stat").on("change", function() {});

这是一个使用您的代码的JSFiddle：

http://jsfiddle.net/2xr3r/

Answer 2

进一步考虑Stefan的答案，您可以使用event.target跟踪调用者，如下所示：

$(".stat").on("change", function(e) {
    if(e.target.id == 'one') {
        // logic for select with id 1 here
        alert('one');
    } else {
         // logic for select with id 2 here
        alert('two');
    }
});

HTML：

<select class="stat" id="one">
    <option>1</option>
    <option>2</option>
</select>

<select class="stat" id="two">
    <option>1</option>
    <option>2</option>
</select>

http://jsfiddle.net/r5ZsL/1/

更改事件..不适用于多个选择

2 个答案: