如何自動填充json數據中的ajax選擇選項？

-2

  <?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的確切答案。

來源

2017-06-22 nisha

裏面你的成功的功能你只需要通過數組循環您收到的響應，並追加option到select

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

例如像，如果你的反應JSON的外表下面

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

說如下圖所示，下面應該可以工作，您必須決定如何將數據發送到瀏覽器並對其進行操作，下面是一個例子，您可以先點擊它創建下拉選項，您可以使用相同的方式實現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" />

也值屬性丟失

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

來源

2017-06-22 17:30:18

不工作..阿克沙伊 – nisha

@nisha我修改我的職務，並增加了一個例子也給你從頭開始 –

如何自動填充json數據中的ajax選擇選項？

回答

相關問題