Ajaxの負荷の選択オプションを動的

Question

は、以下のコードは、次のとおりです。

ここでは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; 
    } 

selectオプションをクリックすると、loadCategory（）が実行され、select with current categoryリストが追加されます。質問は私がカテゴリを選択した後、selectオプションはloadCategory（）をもう一度実行し、私が選択したvalueオプションは空になります。私はオプションを選択した後に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; 
} 

さらに、あなたも offで select elementにバインド解除 click eventを試すことができます[使用している jqueryバージョンに基づいて offの使用方法をチェック]。元

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

    return false; 
} 

---

については

は、以下のようにselect elementからonclickを削除するremoveAttrを使用してみてください：

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