Question

我尝试进行动态相关下拉列表。当用户选择地区时，他必须从该地区的另一个学校下拉菜单中进行选择。我知道有很多教程，我尝试了一些方法，但我是jQuery的新手，我无法做到。这是我的观点：

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

我的控制器是：

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

我的模特是：

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

你能帮助我吗？：）

Answer 1

这里有几个问题。我会在视图中使用最少量的PHP。我还会将.ajax调用重命名为.post，因为它更容易阅读，并将该json结果转换为对象以便于迭代。看看我做的修改并试一试。如果一切正常，请告诉我：

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控制器：

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模型：

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 个答案: