Question

我对jquery和ajax并不擅长，而且我现在在选择框上遇到了困难。我使用CI，我的代码如下。

 <select name="brand" class="form-control" id="brand" required>
      <?php
        if($items) {
          foreach($items as $key) {
      ?>
      <option value="<?php echo $key->brand_id ?>">
        <?php echo $key->brand_name ?></option>
      <?php
        }
       }
      ?>
    </select>

并且，将根据“品牌”显示另一个选择框“类别”数据。如何从“品牌”中携带数据并使用jquery在“类别”中显示数据？

Answer 1

您可以使用ajax。见下面的例子

$(function(){
  $('#brand').on('change', function(){
    var brand = $(this).val();
    $.ajax({
     type : 'post',
     url : '<?php echo base_url();?>controller_name/function_name',
     data : 'brand='+brand,
     dataType : 'json',
     success : function(msg){
        // here you can populate data into category select option
       var options;
       for(var i = 0; i<msg.length; i++)
       {
          options = '<option>'+msg.category[i].category_name+'</option'>;
       }
       $('#category').html(options); // your html part for category should look like this <select id="category"></category>
     }
   });
});
});

控制器部分中的php代码（函数名称showCategory）

function showCategory(){
  $brand = $this->input->post('brand');
  $data['category'] = $this->your_model->your_function_to_select_data();
  echo json_encode($data);
}

Answer 2

            <?php
            ?>
            <select name="brand" class="form-control" id="brand" required>
                  <?php
                    if($items) {
                      foreach($items as $key) {
                  ?>
                  <option value="<?php echo $key->brand_id ?>">
                    <?php echo $key->brand_name ?></option>
                  <?php
                    }
                   }
                  ?>
                </select>
                <p>Category:</p>
                <select name="category">
                <!--Content will be popullated from ajax call-->
                </select>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js">    </script>
            <script type="text/javascript">
            (function($){
                $(function(){
                    $(document).on('change' , '[name=brand]', function(){
                        var brand_selected = $(this).val();
                        $.ajax({
                            url: '[your url to fetch category based on categoryid]' ,
                            dataType:"json",
                            data: {brand : brand_selected},
                            success: function(r){

                                /**
                                 * your response should be in json format
                                 * for easy work
                                 {catd_id: catname, cat_id :catname}
                                 */
                                 var html = '';
                                 if(r && r.length){
                                    $.each(r, function(i, j){
                                        html +='<option value="'+i+'">'+j+'</option>';
                                    })
                                 }
                                /**
                                 * finaly populat ethe category data
                                 */
                                 $('[name="category"]').html(html);
                            }
                        })
                    })
                })
            })(jQuery)
            </script>

根据您的要求更改部分......

Answer 3

使用此方法检测选择标记的更改值。

$( "#brand" ).change(function() {
  var myOption = $(this).val();
  // use ajax to get data for 'category' select by using "myOption"
});

然后当你得到ajax响应时，用

添加新的select标签

for (var i = 0 ; i < response.length; i++)
  {
    $('#category').append('<option>'+response[i]+'</option>')
  }

Answer 4

我仍然没有得到所需的答案。以下是我的观点。

<select name="brand" class="form-control" id="brand" required>
    <?php
        if($items) {
            foreach($items as $key) {
    ?>
    <option value="<?php echo $key->brand_id ?>">
        <?php echo $key->brand_name ?>
    </option>
    <?php
            }
        }
    ?>
</select>

<select name="category" class="form-control" id="category" required>

</select>

的Ajax：

<script>
    $(function() {
        $("#brand").on('change', function() {
            var brand = $(this).val();
            $.ajax ({
                type: "post",
                url: "<?php echo base_url(); ?>receiving/showCategory",
                dataType: 'json',
                data: 'brand='+brand,

                success: function(msg) {
                    var options;
                    for(var i = 0; i<msg.length; i++) {
                        options = '<option>'+msg.category[i].category_name+'</option'>;
                    }
                    $('#category').html(options);
                }
            });
        });
    });
</script>

我的控制器：

    function showCategory() {
        if($this->session->userdata('success')) {
            $brand_id = $this->input->post('brand');
            $data['category'] = $this->item_model->category($brand_id);
            echo json_encode($data);

        } else {
            //If no session, redirect to login page
            redirect('login', 'refresh');
            $this->load->helper('url');
        }
    }

我的类别表包含：category_id，category_name，brand_id。

从select中选择一个选项，然后使用Codeigniter在另一个选择框中显示数据

4 个答案: