0

我有两个下拉列表，锦标赛和类别。视图的输出将是这样的：

<select id="tournament">
<option selected="selected" value="1">Tournament1</option>
<option value="2">Tournament2</option>
<option value="3">Tournament3</option>
</select> 

<select id="category">
<option selected="selected" value="1">Category1</option>
<option value="2">Category2</option>
<option value="3">Category3</option>
</select>

选项的值是从 db 表中获取的。在这张桌子上，我有锦标赛和类别之间的关系。它的记录看起来像这样：

锦标赛id category_id team_id ...

        1           1       1
        1           1       2
        1           1       3
        2           1       4
        2           2       5
        2           3       6

我想要做的是，当“锦标赛”下拉列表发生变化时，比如说从 1 到 2，然后下拉“类别”应该用新值（步骤 1）和下面显示的结果记录（例如团队名称、胜利等）进行更新。 ） （第2步）。这意味着，url (localhost/ci/results/) 不应更改。

我按照本教程了解了如何制作第 1 步： dynamic_dependent_dropdown_filtering_with_codeigniter_and_jquery，但停留在第 2 步。

我想，我必须以某种方式触发控制器，然后是视图，以便在两个下拉列表中的任何一个发生一些更改后显示新记录。

任何有关如何执行此操作的帮助或提示将不胜感激。

基本上，我需要这样的东西：

摩托车比赛结果

更新#1：

这是我的控制器（results.php）：

class Results extends CI_Controller {
public function __construct()
{
    parent::__construct();
    $this->load->model("tournaments_model");
}

function index(){
    $data['mytitle'] = 'Results';

    if($this->input->post('tournaments')){
        $tournament_id = $this->input->post('tournaments');
    }else{
        $tournament_id=1;
    }

    if($this->input->post('categories')){
        $category_id = $this->input->post('categories');
    }else{
        $category_id=1;
    }

    $data['tournaments'] = $this->tournaments_model->getTournaments();
    $data['categories'] = $this->tournaments_model->getCategories($tournament_id);

    $data['rows'] = $this->tournaments_model->getAll($tournament_id, $category_id);

    if($data['rows']>0){
        $this->load->view('header_view', $data);
        $this->load->view('results_view', $data);
        $this->load->view('footer_view');   
    }else{
        $this->load->view('header_view', $data);
        $this->load->view('norecords_view');
        $this->load->view('footer_view');
    }   
}

function postCategory($tournament_id)
{
    $this->load->model("tournaments_model");
    $data['categories'] = $this->tournaments_model->getCategories($this->input->post('tournaments'));
    $data['categories'] = json_encode($data['categories']);
    $this->load->view('jsonCategory_view', $data);
}

这是视图（results_view.php）：

<table>
<tr>
<td>Tournament</td>
<td>
<?php 
echo '<form id="frmTCG"  action="'; echo base_url().'results/" method="post" name="frmTCG"/>';

foreach($tournaments as $r){
 $opTournament[$r->tournament_id] = $r->tournament_name;
}

if(isset($_POST['tournaments'])){
 echo form_dropdown('tournaments', $opTournament, $_POST['tournaments'], 'id="tournament"');
}else{
 echo form_dropdown('tournaments', $opTournament, null, 'id="tournament"');
}

?>
</td>
</tr>
<tr>
<td>Category</td>
<td>
<?php 
foreach($categories as $r){
 $opCategory[$r->category_id] = $r->category_name;
}

if(isset($_POST['categories'])){
 echo form_dropdown('categories', $opCategory, $_POST['categories'], 'id="category"');                   
}else{
 echo form_dropdown('categories', $opCategory, null, 'id="category"');                   
}
?>

</td>
</tr>
<tr>
</table>

这是 jquery（从 footer_view 调用）：

$('#tournament').change(function(){
var tournament_id = $('#tournament').val();

if (tournament_id != ""){

    var post_url = "results/postCategory/" + tournament_id;
    //var post_url = "results/";

    $.ajax({
        type: "POST",
         url: post_url,
         //data:     $('#tournament').serialize(),     
         data:  $('#frmTCG').serialize(),// 
         dataType: 'json',


         success: function(data) 
          {

            $('#category').empty();
            $('#category').show();

               $.each(data,function(id, name) 
               {                    
                var opt = $('<option />'); 
                  opt.val(id);
                  opt.text(name);

                  $('#category').append(opt); 

                });

           }, //end success
         error: function(jqXHR, textStatus, errorThrown) {
            console.log("getTestData failed with textStatus '" + textStatus + "' errorThrown '" + errorThrown + "'");
    }

     });

} 
}); //end change    

$('#category').change(function(){
  var category_id = $('#category').val();

  if (category_id != ""){
       var post_url = "results/postCategory/" + category_id;
    ...same as $('#tournament').change()
}

问题是 index() 中的 $tournament_id 和 $category_id 永远不会更新，它们不会从 $_POST[] 中获取值，这意味着 getAll() 不会带来新记录。

那么，在两个下拉列表中的任何一个更改之后，我如何强制它再次调用我的控制器的 index() ？谢谢你。

4

1 回答 1

0

正如 Karoly 所说，这是 ajax 的一个问题。

在控制器中创建一个函数，返回锦标赛的类别

function ajax_return_categories($tournament_id = NULL)
{
    if($tournament_id != NULL)
    {
         $this->db->select('categories')->from('db_table')->where('category_id',$tournament_id);
         $query = $this->db->get();
         return json_encode($query->result_array());
    }
}

并在第一个下拉列表更改时使用 ajax 调用它

$('#tournament').change(function(){
    var tournament_id = this.value;
    var result = $.get('/tournament_controller/ajax_return_categories/'+tournament_id);
    $.each(result, function(val, text) {
        $('#category').append(
            $('<option></option>').val(val).html(text)
        );
    });
})

类似的东西。

更新：

如果您希望页面上的数据根据​​下拉选择更新并且您不希望 URL 更改，则需要使用 ajax 来请求和填充数据。

在 result.php 控制器中创建一个返回结果的函数：

function get_results($tournament_id = NULL, $category_id = NULL){

    $data['rows'] = $this->tournaments_model->getAll($tournament_id, $category_id);

    if($data['rows']>0){
        $this->load->view('results_view', $data);
    }else{
        $this->load->view('norecords_view');
    }   
}

并在下拉列表更改时调用它

$('#tournament').change(function(){
    var tournament_id = this.value;
    var result_table = $.get('/tournament_controller/get_results/'+tournament_id);
    $('#results_holder').html(result_table);
    var result = $.get('/tournament_controller/ajax_return_categories/'+tournament_id);
    $.each(result, function(val, text) {
        $('#category').append(
            $('<option></option>').val(val).html(text)
        );
    });
})
于 2012-11-09T13:32:36.557 回答