阿賈克斯負載選擇選項動態

Question

我仍然在JavaScript和Ajax新的，我想在我的HTML創建Ajax顯示當前類別中選擇在我的笨項目中，代碼如下：

這裏的HTML：

<select class="form-control" name="category" id="category" onclick="loadCategory();"> 
    <option value="">Choose</option> 
    <option>&nbsp;</option> 
    <option>&nbsp;</option> 
</select> 

這裏的JavaScript：

function loadCategory() 
{ 
var url = "<?php echo site_url('home/ajax_show_category_options');?>"; 
$('#category').load(url); 
return false; 
} 

這裏是我的控制器：

public function ajax_show_category_options() 
    { 
    $category = $this->db->get('category')->result(); 
    $data = "<option value=''>-- Choose--</option>"; 
    foreach ($category as $rowCategory) { 
     $data .= "<option value='".$rowCategory->id."'>".$rowCategory->name."</option>"; 
    } 
    echo $data; 
    } 

當我點擊選擇選項，將執行loadCategory（），然後將選擇附加到當前類別列表。問題是在我選擇類別之後，選擇選項將再次運行loadCategory（），並且我選擇的值選項將爲空。如何在我選擇選項後停止loadCategory（）？謝謝。

Answer 1

爲了保持這種簡單，設置一個全局布爾變量。將其值設爲true並在執行ajax call之前檢查它是否爲真。考慮下面的例子。

var loadedOptions=false;//global variable 
function loadCategory() 
{ 
    if(!loadedOptions){ 
     var url = "<?php echo site_url('home/ajax_show_category_options');?>"; 
     $('#category').load(url,function(){ 
      loadedOptions=true; //set it to true once request is done 
     }); 
    } 
    return false; 
} 

此外，你也可以嘗試解除綁定 click event上 select element與 off [檢查的 off根據您使用 jquery版本使用。

對於離

function loadCategory() 
{ 
    var url = "<?php echo site_url('home/ajax_show_category_options');?>"; 
    $('#category').load(url,function(){ 
      $("#category").off('click'); 
    }); 

    return false; 
} 

---

嘗試使用removeAttr刪除onclick從select element如下：

$('#category').load(url,function(){ 
    $("#category").removeAttr('onclick'); 
});