javascript - Ajax 动态加载选择选项

Question

我对 javascript 和 ajax 还很陌生，我正在尝试在 CodeIgniter 项目中的 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;
}

这是我的 Controller :

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

为了简单起见，设置一个全局 bool 变量。将其值设置为 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');
});