php - 如何在 Codeigniter 中使用 Ajax 进行动态下拉菜单

标签 php jquery ajax codeigniter

我知道这可能是第 [insertLongNumber] 次有人问这个问题,我做了研究,但找不到适合我的问题的另一个答案。所以就在这里。

我正在 codeigniter 中使用 php 和 ajax 开发动态下拉菜单。我是 CI 新手,并且对 Ajax 有基本了解。

到目前为止我注意到的是,在控制台中,它无法识别来自第一个下拉列表的值,所以我得到departamento_id:未定义 这让我觉得问题来自ajax脚本(我从网上得到的)

我的观点,包括ajax代码

<?php
$this->load->helper('html'); 
?>

<html>
<head>
    <title>Buscador</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#dpto-dropdown select').change(function () {
                var selDpto = $(this).attr('value');
                console.log(selDpto);
                $.ajax({
                    url: "test/ajax_call",
                    async: false,
                    type: "POST",
                    data: "departamento_id="+selDpto,
                    dataType: "html",

                    success: function(data) {
                        $('#ciudad').html(data);
                    }
                })
            });
        });
    </script>
</head>

<?php echo form_open('test/buscar');?>

<?php 

<div id='dpto-dropdown'><?php print form_dropdown('departamentos', $departamento) ?></div>


<div id="ciudad"><select><option value=''>-</option></select></div>
//rest of code...

这是我的 Controller 代码:

class Test extends CI_Controller 
{
function __construct()
{
    parent::__construct();
    $this->load->model('buscador_model');
}   

function index()
{
    $departamentos = $this->buscador_model->traerInfoDptos();
    $precios = $this->buscador_model->traerPrecioHoteles();

    foreach($departamentos as $departamento){
        $dpto_final[$departamento->id] = $departamento->nom_departamento;
    }

    $info = array(
        'departamento' => $dpto_final,
        'precios' => $precios,
    ); 

    $this->load->view('buscador_view', $info);
}

function ajax_call()
{
    //check to see people wont go directly
    if (isset($_POST) && isset($_POST['departamento_id'])) 
    {
        $dpto = $_POST['departamento_id'];
        $ciudad = $this->buscador_model->traerCiudadPorDpto($dpto);

        foreach ($ciudad as $c)
        {
            $ciudadfinal[$c->cod_ciudad] = $c->nom_ciudad;
        }

        //dropdown

        echo form_dropdown('Ciudades', $ciudadfinal);
    }
    else 
    {
        redirect('index');
    }
}
}

这是我的模型:

Class Buscador_model extends CI_Model
{

function traerInfoDptos()
{
    $this->db->select('id, nom_departamento');
    $this->db->from('departamento');
    $query = $this->db->get();

    if ($query->num_rows > 0)
    {
        return $query->result();
    }
}

function traerCiudadPorDpto($dpto)
{
    $query = $this->db->query("SELECT nom_ciudad, cod_ciudad FROM ciudad WHERE departamento_id = '{$dpto}'");

    if ($query->num_rows > 0)
    {
        return $query->result();
    }
}

}// end buscador model class

最佳答案

查看此页面:http://www.onerutter.com/open-source/jquery/jquery-tips-how-to-get-value-of-selected-option-in-select-box.html

您需要使用.val()而不是.attr('value')

<script type="text/javascript">
    $(document).ready(function () {
        $('#dpto-dropdown select').change(function () {

            var selDpto = $(this).val(); // <-- change this line
            console.log(selDpto);

            $.ajax({
                url: "test/ajax_call",
                async: false,
                type: "POST",
                data: "departamento_id="+selDpto,
                dataType: "html",

                success: function(data) {
                    $('#ciudad').html(data);
                }
            })
        });
    });
</script>

关于php - 如何在 Codeigniter 中使用 Ajax 进行动态下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15348634/

相关文章:

php - 带有 ajax 请求的 Codeigniter csrf token (500 内部服务器错误)

php - 如何创建一个从代码中获取参数并返回字符串的函数?

javascript - 调用函数时在主页上显示警报

jquery:如何获取 anchor 标记的id

javascript - 如何从 Ajax Request 获取返回值并将其分配给一个元素?

php - Zf2 float 验证无效但验证器消息为空

javascript - 带有恢复功能的 jQuery 拖放

javascript - 当做出选择框选项时,如何停止隐藏页面上所有 div 的 JS 查询?

ajax - VueJS - 迭代从 AJAX 调用返回的数据

jquery - 浏览器返回 HTTP 200 且响应文本为空