Question

目的：我在Jquery中使用Ajax创建下拉列表，从数据库中选择数据并发送到html格式的html。

问题：在Ajax响应之后，我无法在我的下拉列表中使用任何选择器。

说明：我使用PHP从数据库中选择城市，并使用选择标记 <selection></selectio> 回显 strong>）下拉并使用 #location 将数据从Ajax发送到 div 标记，以便在浏览器中向用户显示。我的工作非常顺利但是我可以＆在用户更改每个下拉列表的任何值后，使用 #testing 选择器进行提示。

PHP函数

public function select_cat($table = FALSE, $where = FALSE) {

        $this->db->select('*');
        $this->db->from($table);
        if ($where) {
            $this->db->where($where);
        }
        $q = $this->db->get();
        if ($q->num_rows() > 0) {
            echo '<select id="testing" name="p_locat" class="form-control" id="p_locat">';
            foreach ($q->result() as $row) {
                echo "<option value=" . $row->l_id . ">" . $row->city . "</option>";
            }
            echo '</select>';
        } else {
            return FALSE;
        }
    }

这是我的Ajax

   $(document).ready(function(){
    $.ajax({
      url: "<?php echo base_url('ads/get_locat'); ?>",
      data: {'<?PHP echo $this->security->get_csrf_token_name(); ?>': '<?PHP echo $this->security->get_csrf_hash(); ?>'},
      dataType: "html",
      cache: false,
      success: function (data) {
      console.log(data);
      $("#location").html(data);
     }
    });
   })

在用户点击每个下拉列表后调用 Alert（）（所有JS内部文档）

$("#testing").on('change',function(){
        alert($("#p_locat"));
    })

这是div标签

<div id="location"></div>

Answer 1

要动态添加元素到DOM，您需要$(document)，如下所示：

$(document).on('change',"select#testing",function(){
 alert($('#testing option:selected').val());
//Write stuffs
});

Answer 2

$.ajax({
    url: "<?php echo base_url('ads/get_locat'); ?>",
    data: {
        '<?PHP echo $this->security->get_csrf_token_name(); ?>': '<?PHP echo $this->security->get_csrf_hash(); ?>'
    },
    dataType: "html",
    cache: false,
    success: function (data) {
        console.log(data);
        $("#location").html(data); // Throw HTML in DOM

        alert($('#testing option:selected').val()); // Get the selected value
        //    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    }
});

如何在Ajax响应之后从select标签获取值作为html格式？

2 个答案: