如何通过 ajax 从 json 数据自动填充选择选项？答案

【问题标题】：How to auto populate select option through ajax from json data?如何通过 ajax 从 json 数据自动填充选择选项？
【发布时间】：2017-06-22 17:20:42
【问题描述】：

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

         <?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 自动填充选择。成功后用什么功能？对于我的情况，我没有从 Google 那里得到确切的答案。

【问题讨论】：

标签： php jquery ajax codeigniter

【解决方案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实现

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

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

还缺少 value 属性

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

【讨论】：

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