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()可能适用于一个元素但我需要观察所有元素并动态更新数据对象，每次元素更改时，控制台都会吐出不同的数据对象。

最终目标

有一个数据对象，例如data = {pm : pm_selected_value}，如果用户必须选择pm，然后，如果他们改变了划分 - 数据对象应更新为：data = {pm : pm_selected_value, divsion: division_selected_value}等等...... < / p>

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

我认为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 - 请注意这里的所有表单元素进行更改，谢谢。”

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);

});

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

内部处理的内容

观察任何元素何时发生变化

1 个答案: