如何进行从属下拉列表

Question

I try to make dynamic dependent dropdown. 我尝试使动态依赖下拉列表。 When user selects region, he has to choose from another dropdown of schools, which are in this region. 当用户选择地区时，他必须从该地区的另一个学校下拉列表中进行选择。 I know there are many tutorials, I tried some ways, but I'm new to jQuery and I cant make it. 我知道有很多教程，我尝试了一些方法，但是我是jQuery的新手，但是我做不到。 Here's my view: 这是我的看法：

 <html> <head> <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(function() { $('#region').change(function() { $.ajax({ type: "POST", url: "<?= base_url()?>index.php/home/get_schools", data: "region="+$('#region').val(), dataType: 'json', success: function(data){ $('#school').empty(); var unassigned = $('#school').attr('options'); unassigned[0] = new Option('UNASSIGNED', 0, true, true); for (var i = 0; i < data.length; i++) { var options = $('#school').attr('options'); options[options.length] = new Option(data[i].school_name, true, true); } } }); }); }); </script> <?php echo "<body>"; echo validation_errors(); echo "<div class='container'>"; echo form_open('home/register'); echo "<table border = '0' >"; echo "<tr><td> Region:* </td><td>"; echo "<select name = 'region[]' id='region' >"; foreach($regions as $row) { echo '<option value= "'.$row->region.'">'.$row->region.'</option>'; } echo "</select>"; echo "</td></tr>"; echo "<tr><td> School:* </td><td>"; echo '<select id="school">'; echo '<option>Please choose region</option>'; echo '</select>'; echo "</td></tr>"; echo "</table>"; echo form_submit($data); echo "</form>"; echo "</div>"; echo "</body>"; echo "</html>";

My controller is: 我的控制器是：

  public function get_schools(){ $this->load->model('user_model'); $region = $this->input->post('region'); $schools = $this->user_form->get_schools_by_region($school); echo json_encode($schools); }

My model is: 我的模型是：

  function get_schools_by_region ($region){ if($region){ $this->db->select('school_id, school_name'); $this->db->where("region = " . $region); $query = $this->db->get('schools'); if ($query->num_rows() > 0) { return $query->result(); }else { return FALSE; } } }

Would you help me? 你能帮我吗？ :) :)

Answer 1

A couple of problems here. 这里有几个问题。 I would use the least amount of PHP possible in my view. 在我看来，我将使用最少的PHP。 I would also remake the .ajax call to .post since it is easier to read, and turn that json result into an object for easier iteration. 我也将对.post的.ajax调用重新制作，因为它更易于阅读，并将json结果转换为对象以便于迭代。 Check out the modifications I made and try it out. 查看我所做的修改，然后尝试一下。 Let me know if it all works: 让我知道这是否有效：

HTML and JS: HTML和JS：

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </head>
    <body>
        <div class='container'>
            <?= validation_errors(); ?>
            <form action="home/register">
                <table border='0'>
                    <tr>
                        <td>Region:*</td>
                        <td>
                            <select name='region' id='region'>
                                <?php foreach ($regions as $row) { ?>
                                    <option value= "<?= $row->region ?>"><?= $row->region ?></option>
                                <?php } ?>
                            </select> 
                        </td>
                    <tr>
                    <tr>
                        <td>School:*</td>
                        <td>
                            <select id="school">
                                <option>Please choose region</option>
                            </select> 
                        </td>
                    </tr>
                </table>
                <input type="submit" name="mysubmit" value="Submit Post!" />
            </form>
        </div>
    </body>
    <script>
        $(document).ready(function() {
            $('#region').change(function() {
                var url = <?= base_url() ?> + "index.php/home/get_schools";
                var postdata = {region: $('#region').val()};
                $.post(url, postdata, function(result) {
                    var $school_sel = $('#school');
                    $school_sel.empty();
                    $school_sel.append("<option>Please choose region</option>");
                    var schools_obj = JSON.parse(result);
                    $.each(schools_obj, function(key, val) {
                        var option = "<option>" + val.school_name + "</option>";
                        $school_sel.append(option);
                    });
                });
            });
        });
    </script>
</html>

PHP Controller: PHP控制器：

function get_schools() {
    $this->load->model('user_model');
    $region = $this->input->post('region');
    $schools = $this->user_form->get_schools_by_region($region);
    echo json_encode($schools);
}

PHP Model: PHP模型：

function get_schools_by_region($region = null) {
    if ($region) {
        $this->db->select('school_id, school_name');
        $this->db->where("region", $region);
        $query = $this->db->get('schools');


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

如何进行从属下拉列表

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-04-02 16:13:09

如何进行从属下拉列表

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-04-02 16:13:09

解决方案1
2 已采纳 2015-04-02 16:13:09