jquery動態選擇列表不會在Codeigniter中自動填充

Question

我的限制。我不能讓這個工作： 我想用jQuery和JSON來動態選擇列表來填充數據庫中的數據 我看到它在螢火蟲控制檯中提取數據，但它不填充選擇框。 這是我的觀點：

<div class="control-group"> 
      <label class="control-label" for="inputPassword">Grad</label> 
      <div class="controls"> 
       <select name="city" id="city" class="update"> 
        <option value="">Odaberi</option> 
        <?php if (!empty($results)) { ?> 
        <?php foreach($results as $row) { ?> 
        <option value="<?php echo $row->city_id; ?>"> 
         <?php echo $row->city_name; ?> 
        </option> 
        <?php } ?> 
        <?php } ?> 
       </select> 
      </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label" for="inputPassword">Deo grada</label> 
      <div class="controls"> 
      <select name="category" id="category" class="update" 
     disabled="disabled"> 
     <option value="">----</option> 
    </select> 
      </div> 
     </div> 

這裏是我的控制器在那裏我打電話給我的模型：

功能update_list（）{$ 這 - > marea-> update_list（）;

而且，最後我的模型

function update_list(){ 
    if (!empty($_GET['id']) && !empty($_GET['value'])) { 
     $id = $_GET['id']; 
     $value = $_GET['value']; 

     try { 
      $objDb = new PDO('mysql:host=localhost;dbname=isport', 'root', ''); 
      $objDb->exec('SET CHARACTER SET utf8'); 

      $sql = "SELECT * 
      FROM `area` 
      WHERE `city_id` = ?"; 
      $statement = $objDb->prepare($sql); 
      $statement->execute(array($value)); 
      $list = $statement->fetchAll(PDO::FETCH_ASSOC); 

      if (!empty($list)) { 
       $out = array('<option value="">Odaberi</option>'); 

       foreach($list as $row) { 
        $out[] = '<option value="'.$row['area_id'].'">'.$row['area_name'].'</option>'; 
       } 

       echo json_encode(array('error' => false, 'list' => implode('', $out))); 
      } else { 
       echo json_encode(array('error' => true)); 
      } 
     } catch(PDOException $e) { 
      echo json_encode(array('error' => true)); 
     } 
    } else { 
     echo json_encode(array('error' => true)); 
    } 
} 

這裏我的ajax：

var formObject = { 
    run : function(obj) { 
     if (obj.val() === '') { 
      obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true); 
     } else { 
      var id = obj.attr('id'); 
      var v = obj.val(); 
      jQuery.getJSON(SITE +'users/update_list', { id : id, value : v }, function(data) { 
       if (!data.error) { 
        obj.next('.update').html(data.list).removeAttr('disabled'); 
        return; 
       } else { 
        obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true); 
       } 
      }); 
     } 
    } 
}; 
$(function() { 
    $('.update').live('change', function() { 
     formObject.run($(this)); 
    }); 
}); 

Answer 1

你的問題是使用jQuery的next功能，

如果提供的jQuery代表一組DOM元素，.next（）方法允許我們搜索這些元素的緊隨其後的同胞在DOM樹中構造一個新的jQuery對象，並從匹配的元素中構造一個新的jQuery對象。

您的選擇框不在同一個集合中，所以下一個返回的是未定義的，沒有任何更新。如果您只需要爲此特定地點使用此代碼一次，則可以將另一個類或ID添加到您的第二個選擇器以指定它。

var formObject = { 
run : function(obj) { 
    if (obj.val() === '') { 
     obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true); 
    } else { 
     var id = obj.attr('id'); 
     var v = obj.val(); 
     jQuery.getJSON(SITE +'users/update_list', { id : id, value : v }, function(data) { 
      if(!data.error) { 
       $('#secondSelect').html(data.list).removeAttr('disabled'); 
      } else { 
       $('#secondSelect').html('<option value="">----</option>').attr('disabled', true); 
      } 
     }); 
    } 
} };