Question

我在该表中有一个表有3个字段（category1，category2，category3）。现在我想填充Dropdown如果下拉一个选择，下拉2值将从数据库genarat。任何人都可以帮助我。

我的控制器

            $this->load->model('quiz_mode');
            $arrStates = $this->quiz_mode->get_unique_catg1();

            foreach ($arrStates as $states)
            {
                $arrFinal[$category->category1 ] = $category->category1 ;
            }
            $data['category2'] = $arrFinal;
      function ajax_call() 
    {

        //Checking so that people cannot go to the page directly.
        if (isset($_POST) && isset($_POST['category1']))
        {

            $catogory = $_POST['category1'];
            $arrcategory = $this->sampl_mode->get_cities_from_catgo1($catogory);

            foreach ($arrcategory as $category)
            {
               $arrFinal[$category->category2] = $category->category2;
            }

            //Using the form_dropdown helper function to get the new dropdown.
            print form_dropdown('category2',$arrFinal);
        }
        else
        {
            redirect('logged_in_user'); //Else redire to the site home page.
        }
    }

我的模特

function get_unique_catg1()
{

    $query = $this->db->query("SELECT DISTINCT category1  FROM sampl_table");

    if ($query->num_rows > 0) {
        return $query->result();
    }
}
    function get_cities_from_catgo1($category) {
    $query = $this->db->query("SELECT category2  FROM sampl_table WHERE category2 = '{$category}'");

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

我的观点

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>untitled</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {

                $('#catgo1-dropdown').change(function () {
                    var selCat1 = $('#catgo1-dropdown').val();
                    console.log(selCat1);
                    $.ajax({
                        url: "<?php echo base_url();?>index.php/sample/ajax_call", //The url where the server req would we made.
                        async: false,
                        type: "POST", //The type which you want to use: GET/POST
                        data: "category1="+selCat1, //The variables which are going.
                        dataType: "html", //Return data type (what we expect).

                        //This is the function which will be called if ajax call is successful.
                        success: function(data) {
                            //data is the html of the page where the request is made.
                            $('#cotegory').html(data);
                        }
                    })
                });
            });
        </script>
</head>

    <body>
    <div id="wrapper">
                <div id="catgo1-dropdown"><?php print form_dropdown('category1'); ?></div>
                <div id="cotegory2"></div>

            </div>
    </body>

</html>

Answer 1

这个

有一个非常简单的解决方案

首先只显示第一个下拉列表然后，当用户选择某个值时，通过ajax将其发送到控制器方法，然后将值接收并传递给模型。
在模型中应该查询它将获取结果的条件然后回到控制器中调用一个视图并将查询结果传递给它您的视图应包含此代码

<?php
foreach($queryresult as $row)
{
?>
<option value = "<?php echo $row->id?>"><?php echo $row->value;?</option>
<?php
}
?>

在您第一次查看有下拉列表时，它应包含以下代码

<select name = "first_drop_down" id = "first_drop_down" onchange = "calljavascriptfunction();">
<?php foreach($first_drop_down_values as $row){?>
<option value = "<?php echo $row->id?>"><?php echo $row->value;?</option>
<?php}?>

和

 <select name = "second_drop_down" id = "second_drop_down" >
 <option value = "0">please select first dropdown</option>
 </select>

和ajax功能

function calljavascriptfunction(){


  $.ajax({
     type : 'POST',
     data : 'first_drop_down_id='+ $('#first_drop_down').val(),
     url : 'controller/method',
     success : function(data){
                 $('#second_drop_down').val(data);
     }
 });
}

完成，这里也是一个教程

http://mikeheavers.com/index.php/site/code_single/dynamic_dependent_dropdown_filtering_with_codeigniter_and_jquery

Answer 2

我在下拉列表的div容器上使用了.html(msg);

  <script type="text/javascript">
    $(document).ready(function() {  
    $('[name="wilaya"]').change(function () {  
            var input= this.value;
            //alert(input);
            $.ajax({
            url: "<?php echo base_url();?>/register/ajax_call",
            data: "input="+input
            })
            .done(function( msg ) {
            $(".commune").html(msg);
            }); }); 
      }); 
    </script>

和控制器Register.php方法ajax_call()

public function ajax_call(){

if (isset($_REQUEST['input']))
        {
        //  echo("hello");
        $input = $_REQUEST['input'];
        $this->load->model('Pro_model');
        $commune=$this->Pro_model->get_dropdown_commune($input);
        //print_r($commune);
        //$this->load->view('registerpro_view', $commune); 
       echo form_dropdown('commune', $commune, 'Adrar');
        }


}

并在模型方面Pro_model.php

function get_dropdown_commune($input)
{
$this->db->from('ea_commune');
$this->db->where('id_wilaya', $input);
$this->db->order_by('id');
$result = $this->db->get();
$return = array();
if($result->num_rows() > 0) {

foreach($result->result_array() as $row) {
$return[$row['id']] = $row['label_commune'];
}
}

        return $return;

}

在codeigniter中填充数据库中的下拉列表

2 个答案: