Php 如何从json数据通过ajax自动填充select选项？_Php_Jquery_Ajax_Codeigniter

Php 如何从json数据通过ajax自动填充select选项？

php jquery ajax codeigniter

Php 如何从json数据通过ajax自动填充select选项？,php,jquery,ajax,codeigniter,Php,Jquery,Ajax,Codeigniter,在我的控制器中，我有以下代码： <?php class Cat_cntrl extends CI_controller{ public function __construct(){ parent::__construct(); $this->load->model('cat_model'); $this->load

在我的控制器中，我有以下代码：

         <?php
        class Cat_cntrl extends CI_controller{


            public function __construct(){
                parent::__construct();
                $this->load->model('cat_model');
                $this->load->helper('form','url');

            }

            public function index(){
                    $get=$this->cat_model->fetchcatdata();
                    $data['result']=$get;
                   $this->load->view('cat_view',$data);

                    }
            public function subcatselect(){

                $cate=$this->input->post('cate');
                $get=$this->cat_model->getsubo($cate);
                $data['result']=$get;
                 echo json_encode(array('result'=>$data['result']));
            }


           }

        ?>

在模型中，我有以下代码：

     <?php
    class Cat_model extends CI_model{
        public function fetchcatdata(){ 
        $this->db->select()->from('cat');
            $query=$this->db->get();
            if($query->num_rows() > 0){
            return $query->result();
        }
        else {
            echo "error";
        }
        }
        public function getsubo($cate){
            $this->db->select($cate)->from('sub_cat');
            $query=$this->db->get();
            //echo $this->db->last_query();
            if($query->num_rows() > 0){
            return $query->result();
        }
        else {
            echo "error";
        }
        }
    }

鉴于我的代码：

 <!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>   <title></title>
</head>
<body>
<form method="post" action="">

    <table>
        <tr>
            <td>Category</td>
            <td><select id="cate">
            <option>
                None Selected
            </option>   
            <?php foreach ($result as $value) {
                ?>
                <option id="val">
                    <?php echo $value->category; ?>
                </option>
                <?php
            }
            ?>
            </select>
            </td>
        </tr>
        <tr>
            <td>Sub Category</td>
            <td><select id="myselect">

            </select>
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" name="" id="sub">
            </td>
        </tr>
    </table>
</form>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function(){
        $('#sub').click(function(e){
            e.preventDefault();
        var cate=$( "#cate option:selected").val();
        var url="<?php echo base_url();?>cat_cntrl/subcatselect";
        $.ajax({
            type:'post',
            url:url,
            data:{cate :cate},
            success:function(response){ 

        }
        })
    })
        })
</script>

问题是在这段代码中如何通过ajax自动填充select。成功后使用什么功能？对于我的情况，我没有从谷歌那里得到确切的答案。

在成功函数中，您只需循环通过作为响应接收的数组，并附加选项进行选择

例如下面这样的例子

dataType: "json",
success:function(response){ 
    $.each(response.result,function(i, item){
         $("#myselect").append($('<option>', {
               value: item[cate],  
               text: item[cate]     
         }));
    });
}

假设您的响应json如下所示，下面应该可以工作，您必须决定如何将数据发送到浏览器并对其进行操作，下面是一个示例，您可以从单击它创建下拉选项开始，这与使用ajax实现的方法相同

var响应={ 结果:[{ 值：“val1”，文本：“text1” }, { 值：“val2”，文本：“text2” } ] } $'btn'。单击函数{ $.eachresponse.result，函数I，项{ $'myselect'。追加${ 值：item.value， text:item.text }; }; };

@nisha我修改了我的帖子，并为你添加了一个从头开始的例子

dataType: "json",
success:function(response){ 
    $.each(response.result,function(i, item){
         $("#myselect").append($('<option>', {
               value: item[cate],  
               text: item[cate]     
         }));
    });
}