数据未填充到带有AJAX请求的select标记中

Question

当前我有一个select标记，每次用户单击该特定的select标记时，我都要通过AJAX调用来填充该标记。为此，我正在做以下操作：

视图类别：

<label class="control-labels ">Property</label>
<select name="property" class="form-control select2 selectsearch" <?php echo (isset($read) ? $read:''); ?> required>
</select>

Ajax请求：

$(document).ready(function(){  
$("#property").click(function(){
var post_url = 'listings/getonClick'
$.ajax({
type: "POST",
url: post_url,
data : { "hid" : $(this).val() },
success: function(response){
$.each(response, function(value, key) {
$("#property").append("<option id="+value.id+">"+value.name+"</option>");
})
}
});
});

控制器类别：

function getonClick(){
$modelList = $this->listings_model->getProperties();
echo(json_encode($modelList));
}

型号类别：

function getProperties(){
$this->db->select("id,name");
$this->db->from("crm_project_properties");
$query = $this->db->get();
return $query->result_array() ;
}

但在这样做之后，我无法在点击之前甚至之后在我的选择标签中获得任何数据

Answer 1

你能用.on试试吗("点击"(？它在过去的中对我有效

$(document).ready(function () {
$("#property").on("click", '*:not(a)', function() {
var post_url = 'listings/getonClick'
$.ajax({
type: "POST",
url: post_url,
data : { "hid" : $(this).val() },
success: function(response){
$.each(response, function(value, key) {
$("#property").append("<option id="+value.id+">"+value.name+"</option>");
})
}
});
});

Answer 2

您应该首先对JSON对象的响应进行编码

$(document).ready(function(){  
$("#property").click(function(){
var post_url = 'listings/getonClick'
$.ajax({
type: "POST",
url: post_url,
data : { "hid" : $(this).val() },
success: function(response){
var responseText = JSON.parse(response);
$.each(responseText , function(value, key) {
$("#property").append("<option id="+value.id+">"+value.name+"</option>");
})
}
});
});