Наблюдение за изменением любого элемента

0

У меня есть довольно уникальная проблема в 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} если пользователь JUST выбирает pm, а затем, если они меняют деление - объект данных должен обновляться до: 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 спасибо".

  • 0
    Когда вы говорите (когда изменяется какой-либо элемент), вы действительно имеете в виду, когда изменяется значение любого входа, верно? Вы буквально можете просто применить .change к родительскому элементу, который содержит элементы ввода.
  • 0
    Что насчет $(document).on('change','.formWrapper input', function(){}); ?
Показать ещё 1 комментарий
Теги:

1 ответ

1
Лучший ответ

Что вы хотите сделать, чтобы прослушивать любое значение выбора, которое нужно изменить в <div class="formWrapper"></div> поэтому вы должны настроить таргетинг на <div> и прикрепить событие изменения к дочернему <div class="formWrapper"></div> <select> s

var choices = new Object();

$('.formwrapper').on('change', 'select', function(){

    choices[$(this).attr('name')] = $(this).val();

    console.log(choices);

});

Одна вещь, которую вы должны сделать, это предоставить уникальное name="" для каждого <select> чтобы вы знали, что имеете дело с анонимной function()

  • 0
    Ваш позволяет только один объект, мой console.log выглядит так: Object {undefined: "ABBBerMac-Calgary"} Object {undefined: "Scott Diamond"} Это не то, что я хотел
  • 0
    Пожалуйста, обратитесь к предложению сразу после кода, который я разместил. Если $(this).attr('name') недостаточно, используйте $(this).attr('class') но я настоятельно рекомендую это сделать, поскольку вы можете применить более одного класса к элементу, и он будет привинчен до вашего объекта

Ещё вопросы

Сообщество Overcoder
Наверх
Меню