1

我正在寻找有关以下情况的指导：

上下文：页面显示一个动态生成的列表，其中包含 X（基于用户的更改）个项目，每个项目的格式如下：

<div class="dashboard_section_item">
    <label for="add_listname_label">Assign to list</label>
    <br/>
    <select name="mod_list" class="mod_list">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
    </select>
</div>

我需要在 JQuery 的下拉列表中处理用户选择。问题是列表在页面上重复 x 次，因此它仅适用于显示的第一个项目。

$(document).ready(function () {
    $(".mod_list").change(function () {
        $.ajax({
            type: 'POST',
            url: 'mod.php',
            data: 'prod_uid=' + $('.prod_uid').val() + '&mod_list=' + $(this).find(':selected').val(),
            dataType: 'json',
            success: function (response) {...
            },
            error: function () {...
            }
        });
        return false;
    });
});

我正在考虑将 UID 连接到列表名称标签，例如：

<select name="mod_list_34745727" class="mod_list">

但我不确定是否有更好的方法来做到这一点。

如何唯一标识每个项目列表以选择其下拉值？

4

1 回答 1

2

假设有很多selects 类mod_list你可以使用on()委托：

$(document).ready(function () {
    $(document).on("change", ".mod_list", function () {
        // this is the select you changed the value
        var $changedValueSelect = $(this);
        // do stuff, ajax and so on
        // print in console the selected value
        console.log($changedValueSelect.val());
    });
});

为什么要委托？因为您在页面中动态附加了元素。

JSFIDDLE

于 2013-11-11T19:37:22.137 回答