Question

我正在寻找以下方案的指导：

上下文：页面显示动态生成的列表，其中包含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">

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

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

Answer 1

假设有很多select个问题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

处理多个div中特定div的事件

1 个答案: