Блог

Главная - Вопросы по программированию - Динамическое зависимое поле выбора Codeigniter с использованием Ajax

Динамическое зависимое поле выбора Codeigniter с использованием Ajax

#javascript #php #jquery #ajax #codeigniter

#javascript #php #jquery #ajax #codeigniter

Вопрос:

Я хочу создать динамическое выпадающее окно выбора с помощью codeigniter, и я новее на этой платформе.

Я следовал этому руководству:https://www.youtube.com/watch?v=bxA6M9LYrPk

Я вставляю сюда свой код и буду очень благодарен вам, пожалуйста, за помощь…

Dynamic_dependent.php (Контроллер)

 <?php if (!defined('BASEPATH')) {
    exit('No direct script access allowed');
}

class Dynamic_dependent extends CI_Controller
{

    public function __construct()
    {
        parent::__construct();
        $this->load->model('dynamic_dependent_model');
    }

    public function index()
    {
        $data['country'] = $this->dynamic_dependent_model->fetch_country();
        $this->load->view('dynamic_dependent', $data);
    }

    public function fetch_state()
    {
        if ($this->input->post('country_id')) {
            echo $this->dynamic_dependent_model->fetch_state($this->input->post('country_id'));
        }
    }

    public function fetch_city()
    {
        if ($this->input->post('state_id')) {
            echo $this->dynamic_dependent_model->fetch_city($this->input->post('state_id'));
        }
    }

}

Dynamic_dependent_model.php (Модель)

 <?php
class Dynamic_dependent_model extends CI_Model
{
    public function fetch_country()
    {
        $this->db->order_by("country_name", "ASC");
        $query = $this->db->get("country");
        return $query->result();
    }

    public function fetch_state($country_id)
    {
        $this->db->where('country_id', $country_id);
        $this->db->order_by('state_name', 'ASC');
        $query  = $this->db->get('state');
        $output = '<option value="">Select State</option>';
        foreach ($query->result() as $row) {
            $output .= '<option value="' . $row->state_id . '">' . $row->state_name . '</option>';
        }
        return $output;
    }

    public function fetch_city($state_id)
    {
        $this->db->where('state_id', $state_id);
        $this->db->order_by('city_name', 'ASC');
        $query  = $this->db->get('city');
        $output = '<option value="">Select City</option>';
        foreach ($query->result() as $row) {
            $output .= '<option value="' . $row->city_id . '">' . $row->city_name . '</option>';
        }
        return $output;
    }
}

?>

dynamic_dependent.php (Посмотреть)

 <html>
    <head>
        <title>Codeigniter Dynamic Dependent Select Box using Ajax</title>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <style>
            .box
            {
                width:100%;
                max-width: 650px;
                margin:0 auto;
            }
        </style>
    </head>
    <body>
        <div class="container box">
            <br />
            <br />
            <h3 align="center">Codeigniter Dynamic Dependent Select Box using Ajax</h3>
            <br />
            <div class="form-group">
                <select name="country" id="country" class="form-control input-lg">
                    <option value="">Select Country</option>
                    <?php
                    foreach ($country as $row) {
                        echo '<option value="' . $row->country_id . '">' . $row->country_name . '</option>';
                    }
                    ?>
                </select>
            </div>
            <br />
            <div class="form-group">
                <select name="state" id="state" class="form-control input-lg">
                    <option value="">Select State</option>
                </select>
            </div>
            <br />
            <div class="form-group">
                <select name="city" id="city" class="form-control input-lg">
                    <option value="">Select City</option>
                </select>
            </div>
        </div>
    </body>

</html>
<script>
    $(document).ready(function () {
        $('#country').change(function () {
            var country_id = $('#country').val();
            if (country_id != '') {
                $.ajax({
                    url: "<?php echo base_url(); ?>dynamic_dependent/fetch_state",
                    method: "POST",
                    data: {country_id: country_id},
                    success: function (data) {
                        $('#state').html(data);
                        $('#city').html('<option value="">Select City</option>');
                    }
                });
            } else {
                $('#state').html('<option value="">Select State</option>');
                $('#city').html('<option value="">Select City</option>');
            }
        });

        $('#state').change(function () {
            var state_id = $('#state').val();
            if (state_id != '') {
                $.ajax({
                    url: "<?php echo base_url(); ?>dynamic_dependent/fetch_city",
                    method: "POST",
                    data: {state_id: state_id},
                    success: function (data) {
                        $('#city').html(data);
                    }
                });
            } else {
                $('#city').html('<option value="">Select City</option>');
            }
        });

    });
</script>

Комментарии:

1. вы столкнулись с какой-либо ошибкой?

2. да, выпадающий список «Штат» и «город» не отображаются, когда я уже выбираю страну.

3. вы проверяете в консоли Chrome-> сеть-> вкладка xhr?

4. вы это имеете в виду? localhost/codeigniter-динамическое окно выбора, зависящее от использования ajax /…

5. Нет перехода по этой ссылке [ blog.bcdsoftware.com/2323 / … и после этой проверки вы получаете значение post в контроллере