Jquery 如何在下拉列表的选择中显示flexigrid？

您好，我需要在下拉列表中显示flexigrid on选项选择，我有三个选项，根据选择，我需要显示适当的felxigrid，我该怎么做

$(document).ready(function () {
$('.group').hide();
$('#option1').show();
$('#selectMe').change(function () {
$('.group').hide();
$('#'+$(this).val()).show();

});
});

<div id="Dialog1" class="group">
<table id="InfoFlexGrid1">  
            </table></div>
<div id=Dialog2" class="group"><table id="InfoFlexGrid2">  
            </table></div>
<div id="Dialog3" class="group"><table id="InfoFlexGrid3">  
            </table></div>
$(document).ready(function(){
$("#cardInfoFlexGrid1").flexigrid({
   dataType: 'json',
  //url: "verification_rep.json",
colModel : [
    {display: 'Name', name : 'Name', width : 120,align: 'center',sortable : false },
    {display: 'Roll No', name : 'RollNo',   width : 150, align: 'center' },
    {display: 'Description', name : 'description',   width : 150, align: 'center', hide: false},
    {display: 'Remarks', name : 'remarks',   width : 250,align: 'center', hide: false},
    {display: 'Date', name : 'date',    width : 100,sortable : false, align: 'center'}  
   ],
  searchitems : [
  {display: 'Name', name : 'Name'},
  {display: 'Roll No', name : 'RollNo', isdefault: true}
  ],
  buttons:[ 
       {name: 'Add', bclass: 'add', onpress : test},
    {name: 'Update', bclass: 'update', onpress : test},
    {name: 'Delete', bclass: 'delete', onpress : test},
    {separator: true} 
  ],
  sortname: "Name",
    sortorder: "asc",
   title: 'Statistical Data Report',
   usepager: true,
   useRp: true,
  rp: 15,
   showTableToggleBtn: true,
  width: 400,
  height: 100, 
   singleSelect: true,
  nowrap: true    
  });

    rows = new Array();
    rows.push({cell: ['Sample1','Sample','Sample','2','Y' ] },
        {cell: ['Sample2','Sample','Sample','2', 'Y' ] }
            );

data = {
 total: 2,    
 page:1,
 rows: rows
  }


 });

    function test(com, grid) {
      //alert("Hello"); 
       if(com=='Update'){
        $('#message-dialog').dialog().dialog("open");

    $('#InfoFlexGrid1').flexAddData(data); 
        }else if(com=='Delete'){
        confirm('Delete ' + $('.trSelected', grid).length + ' items?')
        $('.trSelected', grid).remove();
    }else if(com=='save'){
        alert("Hello");
    //  $("#manualDatEntryDialog").dialog("open");  
    }
}   
 function procMe(com, grid) {
 var gridRows = $("#InfoFlexGrid1 tbody tr");
  gridRows.click(function(event){
  displaySelectedItem($(this).attr('id').substr(3));
  return false;
  });
 }

$（文档）.ready（函数（）{
$（'.group'）.hide（）；
$（'#option1'）.show（）；
$（'#selectMe'）。更改（函数（）{
$（'.group'）.hide（）；
$（'#'+$（this.val（））.show（）；
});
});
我为所有网格表使用了具有唯一id的div

  <h1>Flexigrid Example Page</h1>

<div id="f1" style="margin-bottom:10px;">
<table id="flex1" style="display:none"></table>

</div>
<div id="f2"  style="margin-bottom:10px;">
<table id="flex2" style="display:none"></table>

</div>
<div id="f3"  style="margin-bottom:10px;">
<table id="flex3" style="display:none"></table>

</div>

现在，我添加了showflexi（）函数来执行选择表号的操作

function showflexi(val){

        $('.flexigrid').attr('class','flexigrid hideBody');
        $('div.ptogtitle').attr('class', ' ptogtitle vsble');  
        if(val!=0){
            $('#f'+val+' .flexigrid').removeClass('hideBody');
            $('div.ptogtitle').removeClass('vsble'); 
        }
}

$(document).ready(function()

//add class hideBody to hide the body content of the table
    $('.flexigrid').attr('class','flexigrid hideBody');/*as all the grids table get flexigrid class*/

//add class vsble to mark the content is invisible
    $('div.ptogtitle').attr('class', ' ptogtitle vsble');   //as all the toggle button get ptogtitle class

function showflexi(val){

        $('.flexigrid').attr('class','flexigrid hideBody');
        $('div.ptogtitle').attr('class', ' ptogtitle vsble');  
        if(val!=0){
            $('#f'+val+' .flexigrid').removeClass('hideBody');
            $('div.ptogtitle').removeClass('vsble'); 
        }
}