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

Purpose: I'm creating a drop down using Ajax in Jquery to select data from database and send to html with html format.

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

Issue: I can't using any selector inside of my drop down which after Ajax respond.

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

Description: I used PHP to select City from database and echo with select tag (<selection></selectio>) to make a drop down and use #location to send data from Ajax to div tag to showing to user in browser.My drop down work very well But I can't used #testing selector to make alert after user change any value of each list of drop down.

描述:我使用PHP从数据库中选择City并使用select标签( )进行回显以生成下拉列表,并使用#location将数据从Ajax发送到div标签,以便在浏览器中向用户显示。我的下载工作得非常好但是在用户更改每个下拉列表的任何值后,我无法使用#testing选择器发出警报。

PHP function

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

Here is My Ajax

这是我的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);
     }
    });
   })

Call Alert() after user click on each drop down (All JS inside document)

用户点击每个下拉列表后调用Alert()(文档中的所有JS)

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

Here is div tag

这是div标签

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

2 个解决方案

#1

For dynamically added elements to the DOM you need to $(document) as below:

要动态添加元素到DOM,您需要$(文档),如下所示:

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

#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
        //    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    }
});