使用jQuery的CodeIgniter動態下拉選擇

我有3個HTML下拉菜單。第一個下拉列表是靜態的，接下來的兩個依賴於前一個下拉列表。我的看法是這樣的：使用jQuery的CodeIgniter動態下拉選擇

    <div class="col-xs-3"> 
          <label for="cat1"><h4>Main Category</h4></label> 
          <select class="form-control" name="cat1" id="cat1" 
          onchange="$('#secondary').load('<?php echo site_url('createplay/getMainCategories'); ?>?cat='+this.value);"> 
          <?php 
          $sql = "SELECT DISTINCT level_one FROM categories"; 
          $query = $this->db->query($sql); 
          foreach ($query->result() as $row) { 
           echo "<option value='".$row->level_one."'>".$row->level_one."</option>"; 
          } 
          ?> 
          </select> 
         </div> 
         <div class="col-xs-4" id='secondary'> 
         </div> 

         <div class="col-xs-3" id='sub-secondary'> 
         </div>

的SQL只在視圖以幫助您瞭解它是我在做什麼。我通常將它保存在模型中。 onchange調用控制器/方法並將HTML select值傳遞給它。這裏是getMainCategories：

public function getMainCategories() { 
    $cat = $this->input->get('cat'); 
    $sql = "SELECT DISTINCT level_two FROM categories WHERE level_one='".$cat."'"; 
    echo '<label for="cat2"><h4>Secondary Category</h4></label>'; 

    $jquery = "$('#sub-secondary').load('".site_url('createplay/getSubSecondary')."?subcat='+this.value);"; 

    echo '<select class="form-control" name="cat2" id="cat2" 
      onchange="'.$jquery.'">'; 

    $query = $this->db->query($sql); 

    foreach ($query->result() as $row) { 
     echo '<option value="'.$row->level_two.'">'.$row->level_two.'</option>'; 
    } 

    echo '</select>'; 
}

現在第一個下拉正確地顯示，當我做出選擇第二個下拉出現，並正常工作。問題是當我在第二個下拉菜單中進行選擇時，第三個下拉菜單沒有出現。什麼都沒有發生，沒有錯誤信息，什麼都沒有我確信這是因爲我從PHP腳本調用jQuery的方式。

我該如何解決這個問題，使其更清潔，並使第三個下拉填充？

來源

2014-06-27 stephenthedev

要做到這一點，最好的辦法是，從第一個下拉列表中選擇值並將其傳遞給控制器（在jquery中使用onchange事件）。並在ajax響應放置新的下拉菜單，這將是該控制器的結果。

事情是這樣的：

控制器：

$data['second_drop_down_data'] = // This will be the result of your 
           // selected value from first drop down... 
echo $this->load->view->('second_drop_down', $data, TRUE);

你可以申請相同的邏輯，第三和第四下拉菜單...

來源

2014-06-27 18:45:28

我有你的方法工作，但我仍然沒有得到如何調用第三個下拉菜單。 – stephenthedev

你在哪裏放第二個Ajax函數？它應該在這個視圖中 - >'second_drop_down'，而不是在你的主文件 –

現在我有3個視圖（靜態下拉菜單的主視圖，第二個下拉菜單的HTML視圖和第三個下拉菜單的視圖）。在每個視圖中都有ajax .load調用 – stephenthedev

我覺得背後的原因沒有反應是在你的「getMainCategories 「功能。只需在您的代碼中檢查以下行：

$jquery = "$('#sub-secondary').load('".site_url('createplay/getSubSecondary')."?subcat='+this.value);";

您還沒有爲jquery調用編寫腳本打開和關閉標記。所以響應正在創建下拉菜單，但jquery調用被視爲一個HTML而不是腳本。

第二件事情是當你動態創建html元素動態短的方法，如加載，點擊等不起作用。所以你必須寫如下：

$jquery = "$(document).on('load', '#sub-secondary',('".site_url('createplay/getSubSecondary')."?subcat='+this.value);";

所以請嘗試上面提到的變化。

來源

2014-06-28 06:40:04

使用jQuery的CodeIgniter動態下拉選擇

回答

相關問題