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

时间:2015-02-27 07:53:54

标签: javascript php jquery codeigniter

我对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在“类别”中显示数据?

4 个答案:

答案 0 :(得分: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);
}

答案 1 :(得分:1)

            <?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>

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

答案 2 :(得分:1)

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

$( "#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>')
  }

答案 3 :(得分:1)

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

<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。