Question

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

         <?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']));
            }


           }

        ?>

在模型I＆＃39;代码中：

     <?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。成功功能后要用什么？我没有得到谷歌的确切回答。

Answer 1

在您的成功功能中，您只需循环浏览作为回复收到的数组，并将option追加到select

$("#your_select_id").append($('<option>', {
   value: 'somevalue',
    text: 'some text'
}));

例如下面的内容

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

如果您的响应json如下所示，下面应该可以工作，您必须决定如何将数据发送到浏览器并对其进行操作，下面是一个示例供您开始，点击它创建下拉选项，就像您一样可以用ajax实现

＆＃13;

var response = {
  result: [{
      value: 'val1',
      text: 'text1'
    },
    {
      value: 'val2',
      text: 'text2'
    }

  ]
}
$('#btn').click(function() {
  $.each(response.result, function(i, item) {
    $('#myselect').append($('<option>', {
      value: item.value,
      text: item.text
    }));
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myselect"></select>
<input type="button" value="click me to create option" id="btn" />

＆＃13;

还缺少值属性

<?php foreach ($result as $value):?>
      <option value="<?php echo $value->category; ?>">
          <?php echo $value->category; ?>
      </option>
<?php endforeach;?>

如何通过json数据中的ajax自动填充选择选项？

1 个答案: