观察任何元素何时更改

Question

我在jquery中有一个相当独特的问题需要解决。我有一个div 包装器：

<div class="formWrapper"></div>

它包含一组元素，当它们更改时(无论哪个元素更改无关紧要( - 应该(例如(存储在数据对象中，并且该对象现在记录到控制台。

所以：

        <div class="formWrapper">
            <div class="floatRight">
                <div>
                    <label>Select a Project Manager</label>
                    <select class="projectManager">
                         <?php foreach($projectManagers as $name){ ?>
                         <option><?php echo $name; ?></option>
                         <?php } ?>
                    </select>
                </div>
                <div>
                    <label>Select a Division</label>
                    <select class="division">
                         <?php foreach($divisions as $division){ ?>
                         <option><?php echo $division['division_name']; ?></option>
                         <?php } ?>
                    </select>
                </div>
            </div>
            <div class="floatLeft">
                <div>
                    <label>Select a Client</label>
                    <select class="client">
                         <?php foreach($clients as $client){ ?>
                         <option><?php echo $client['client_company_name']; ?></option>
                         <?php } ?>
                    </select>
                </div>
                <div>
                    <label>Choose a Date</label>
                    <input type="text" class="date" placeholder="Click to choose a date"/>
                </div>
            </div>
        </div>

很简单，看看发生了什么。但是，如果projectManager发生变化或divison或...两个或所有元素，一个简单的change()可能适用于一个元素，但我需要观察所有元素并动态更新数据对象，以便每次元素更改时，控制台都会吐出不同的数据对象。

最终目标

有一个数据对象，例如，如果用户只是选择 pm，然后，如果他们更改除法，则data = {pm : pm_selected_value} - 数据对象应更新为 should：data = {pm : pm_selected_value, divsion: division_selected_value}等等......

我知道如何获取每个元素的值，我不知道如何在观察每个元素的同时创建这样的动态数据对象。

问题，我认为阅读文档change()这样做，即使我有这样的数据对象：

data = {pm : pm_selected_value, divsion: division_selected_value}

我去更新 pm(所以选择一个不同的 pm(，数据对象应该立即更新以反映该更改：

data = {pm : pm_selected_NEW_value, divsion: division_selected_value}

现在我可以将.change()应用于每个元素 - 但是没有办法将其应用于div说 - "对不起，JavaScript 先生 - 请在此处查看所有表单元素以获取更改，k 谢谢。

Answer 1

您要执行的操作是侦听<div class="formWrapper"></div>内要更改的任何选择值，因此您应该定位<div>并将更改事件附加到子<select>

var choices = new Object();
$('.formwrapper').on('change', 'select', function(){
    choices[$(this).attr('name')] = $(this).val();
    console.log(choices);
});

您应该做的一件事是为每个<select>提供一个唯一的name=""，以便您知道您在匿名function()中处理的内容