Как внедрить данные в клонированный выпадающий список с помощью плагина jQuery?

Question

У меня есть динамическая форма, и я использую плагин SheepIt! для клонирования моих элементов формы. Моя форма имеет динамический набор раскрывающихся списков, где второй раскрывающийся список отображает набор значений на основе выбора из первого раскрывающегося списка.

Моя проблема в том, что это форма для редактирования, поэтому существующие данные должны быть вставлены в элементы формы при загрузке страницы. К счастью, SheepIt позволяет ввод данных ; однако у меня возникают трудности, поскольку раскрывающиеся списки в моей форме являются «динамическими», как описано выше.

Есть идеи о том, как мне обойти это и внедрить данные в мои элементы динамической формы?

Javascript:

<script>
$().ready(function() {

    var sheepItForm = $('#clone').sheepIt({
        separator: '',
        allowRemoveLast: true,
        allowRemoveCurrent: true,
        allowAdd: true,
        maxFormsCount: 3,
        minFormsCount: 1,
        iniFormsCount: 1,
        data: [
            {
                'item_1': 'CLONE #1 ITEM 1 DATA HERE',
                'item_2': 'CLONE #1 ITEM 2 DATA HERE',
            },
            {  
                'item_1': 'CLONE #2 ITEM 1 DATA HERE',
                'item_2': 'CLONE #2 ITEM 2 DATA HERE',
            },
            ...
        ]        
    });

    $("#item_1").live('change', function () {   

      var group_id = $(this).val();
      var self = $(this); 

      var $children = $(this).parent().next().children('select#item_2')

       $.ajax({
            type: "POST", 
            url: "../../db/groups.php?item_1_id=" + group_id, 
            dataType: "json",
            success: function(data){    
                $children.empty()
                $children.append('<option value="">Select</option>');           
                $.each(data, function(i, val){    
                   $children.append('<option value="' + val.group_id + '">' + val.name + '</option>');
                });
                $children.focus();
            },
            beforeSend: function(){
                $children.empty();
                $children.append('<option value="">Loading...</option>');
            },
            error: function(){
                $children.attr('disabled', true);
                $children.empty();
                $children.append('<option value="">No Options</option>');
            }
        })  

    });

});
</script>

HTML:

<label id="item_1_label" for="item_1" class="label">#1:</label>
<select id="item_1" name="item_1" />
    <option value="">Select</option>
    <?php
        $sth = $dbh->query ("SELECT id, name, level 
                             FROM groups
                             WHERE level = '1'
                             GROUP by name
                             ORDER BY name");                                   
        while ($row = $sth->fetch ()) { 
            echo '<option value="'.$row['id'].'">'.$row['name'].'</option>'."\n";       
        }
     ?>
</select>

<label id="item_2_label" for="item_2" class="label">#2:</label>
<select id="item_2" name="item_2" />                        
</select>

PHP (groups.php)

<?php

require_once('../includes/connect.php');        

$item_1_id = $_GET['item_1_id'];

$dbh = get_org_dbh($org_id);

$return_arr = array();

$sth = $dbh->query ("SELECT id, name, level 
                     FROM groups
                     WHERE level = '2'
                     AND parent = $item_1_id
                     GROUP by name
                     ORDER BY name");   

while ($row = $sth->fetch ()) { 

    $row_array = array("name" => $row['name'], 
                       "id" => $row['id']); 

    array_push($return_arr,$row_array);     
}

echo json_encode($return_arr);

?>  

Пример вывода JSON:

[{"name":"A","id":"0"},{"name":"B","id":"1"},{"name":"C","id":"2"}]

Answer 1

Проблема в том, что вы используете идентификаторы для управления вашими «динамическими» полями выбора, но, добавляя sheepIt в микс, вы клонируете эти элементы, и новые пары больше не соответствуют вашим селекторам. Я бы начал с использования классов для нацеливания на вещи, которые вы хотите вести себя аналогично:

    <select id="item_1" name="item_1" class="firstSelect"/>
...
    <select id="item_2" name="item_2"  class="secondSelect"/>   

Тогда ваш обработчик изменений может работать для ЛЮБОЙ из групп, а не только для исходной:

$(".firstSelect").live('change', function () {   
  ...
  var $children = $(this).parent().next().children('.secondSelect')

Есть еще пара изменений, но идея состоит в том, чтобы сделать ваш код как можно более общим, и нет смысла ориентироваться на уникальные характеристики, если вам нужно общее поведение. groups.php не должно волновать, ВОЗ отправляет выбор, ТОЛЬКО КАКОЙ выбор был сделан. Затем он может вернуть соответствующие параметры.

Точно так же ваш javascript не нужно привязывать к уникальным идентификаторам, вы уже прошли половину пути, включив обход в свой обработчик. Зачем еще вы используете

var $children = $(this).parent().next().children('select#item_2') 

, чтобы перейти к соответствующему полю выбора, когда вы, очевидно, могли только что использовать

var $children = $('#item_2')

Answer 2

Это вызывает Ajax? Возможно, что следующее не вызывается, поскольку оно динамически загружается.

$("#item_1").change(function () {

Возможно, попробуйте изменить его на

$("#item_1").live("change",function () {

По крайней мере, стоило бы добавить туда предупреждение (), чтобы посмотреть, срабатывает ли оно.