Javascript Ajax动态加载选择选项

我对javascript和ajax还是新手，我正在尝试在我的CodeIgniter项目中的html select上创建ajax show current category，代码如下：

以下是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？谢谢。

要保持简单，请设置一个全局布尔变量。将其值设置为true，并在执行ajax调用之前检查其是否为true。考虑下面的例子。

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;
}

尝试使用removeAttr从select元素中删除onclick，如下所示：

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

为了保持简单，设置一个全局布尔变量。将其值设置为true，并在执行ajax调用之前检查其是否为true。考虑下面的例子。

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;
}

尝试使用removeAttr从select元素中删除onclick，如下所示：

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

---

当我第一次单击选择选项时，它是给我空的选择。您是否将其loadedOptions变量全局设置为false？是的，我设置了。这是给我一个类似残疾人的选择。所以我尝试在id=category中的onclick之后使用onchange。仍然是相同的结果。当使用内联onclick时，off不会做任何事情。我想我想要的是当我选择一个类别，然后不再加载类别，并且使我选择的类别的值仍然存在。当我第一次单击选择选项时，它给我空的选择。你是否将其loadedOptions变量全局设置为false？是的，我有。这是给我一个类似残疾人的选择。所以我尝试在id=category中的onclick之后使用onchange。当使用内联onclick时，仍然是相同的结果。off不会做任何事情。我想我想要的是当我选择一个类别，然后不再加载类别，并且使我选择的类别的值仍然存在。不要在一个目录上使用click listener。当您打开“选择”和选择某个选项时，将激发。侦听更改事件那么，我应该怎么做？onchange仅在选择/取消选择选项时才会启动。不要在应用程序上使用click listener。当您打开“选择”和选择某个选项时，将激发。侦听更改事件那么，我应该怎么做？onchange仅在选择/取消选择选项时才会触发