Question

我想在此平台上制作一个带有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>

使用Ajax的Codeigniter动态相关选择框

0 个答案: