选择第一个下拉列表后如何使JSON数据动态获取值

Question

从一个选项中选择选项后，我从查询中获得价值 表，它填充来自 ajax 的数据并返回一个 JSON 数据。问题是我正在动态接收 JSON 中的值，但我是 只传递第一个值所以..我怎样才能让这个动态成为我的 结果是要赋予价值的东西以及使其充满活力的关键。

    <script type="text/javascript">
    $(document).ready(function(){
        $('#cate').change(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},
                dataType:"JSON",
                success:function(response){
                    console.log(response);
                    if (response.result ) {
                        $(response.result).each(function(k, v){
                            $('#myselect').append($('<option>', {
                              value: v['Mobile'],
                              text: v['Mobile']
                            }));
                        })
                    }

                }
            })
        })
    })
    </script>

这里是我的控制器代码：

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

Answer 1

你可以像这样访问keydynamically

var json = JSON.parse('{"result":[{"car":"bmw"},{"car":"xuv"}]}');

   // console.log(json.result);

$.each(json.result,function(keys,values){
        for (var key in values) {
         console.log(values[key]);
         
         }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

ajax : : 你的ajax成功函数应该是这样的

      .........
     if (response.result ) {
    $('#myselect').empty();
    $.each(response.result,function(keys, values){

        for (var key in values) {

         $('#myselect').append($('<option>', {
              value: values[key],
              text: values[key]
         }));

         }

    })
}
 .........

Answer 2

当您更改其父类别并更改使用$.each() 而不使用特定键时，您必须清除您的mySelect 下拉列表，

if (response.result.length) {
    $('#myselect').empty();// make it empty if new child category is found
    $(response.result).each(function(key, obj) {
      $.each(obj, function(k, v){ 
        $('#myselect').append($('<option>', {
          value: v,
          text: v
        }));
      }); // end each obj
    }); // end each response.result
}

片段，

var result = {
  "car": [{
    "car": "BMW"
  }, {
    "car": "Audi"
  }],
  "mobile": [{
    "mobile": "HTC"
  }, {
    "mobile": "Samsung"
  }]
}

function changeCat(result) {
  $('#myselect').empty(); // make it empty if new child category is found
  result.length && $(result).each(function(key, obj) {
      $.each(obj, function(k, v){
         $('#myselect').append($('<option>', {
            value: v,
            text: v
         }));
      });
  });
}
$('button[data-type]').on('click', function() {
  changeCat(result[$(this).attr('data-type')]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myselect"></select><br/>
<button data-type="car">Select Car</button><br/>
<button data-type="mobile">Select Mobile</button><br/>