如何使用jQuery插件將數據注入到克隆下拉框中？

我有一個動態的形式，並使用SheepIt!插件克隆我的表單元素。我的表單有一組動態下拉框，其中第二個下拉框會根據第一個下拉框中的選擇顯示一組值。如何使用jQuery插件將數據注入到克隆下拉框中？

我的問題是，這是一個「編輯」的形式，所以現有的數據需要被注入到表單元素在頁面加載時。幸運的是，SheepIt允許data-injection;然而，我有困難，因爲我的表單中的下拉框是「動態的」，如上所述。

我如何能解決這個和數據注入到我的動態表單元素任何想法？

的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"}]

來源

2012-01-12 Michael

它是否在調用Ajax？由於動態加載，以下情況可能不會被觸發。

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

也許嘗試將其更改爲

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

在至少它可能是值得扔在警報（）在那裏，看看它是否被觸發。

來源

2012-01-12 01:28:37 shadylane

所有正在與AJAX調用，這是嚴格的數據打針我我有困難。 – Michael 2012-01-12 01:43:11

是不是被刪除了.on？ – SpYk3HH 2012-01-16 23:44:36

的問題是，你正在使用的ID來控制你的「動態」的選擇框，但通過添加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並不需要被固定下來唯一的ID，你已經通過在您的處理程序遍歷了一半。那你幹嘛要使用

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

過度到匹配的選擇框移動你的方式，當你清楚可以只使用

var $children = $('#item_2')

來源

2012-01-19 07:39:25 Sinetheta

如何使用jQuery插件將數據注入到克隆下拉框中？

回答

相關問題