How to show the flexigrid on selection of a drop down list?

Question

Hi I need to show a flexigrid on selection of option in a drop down list, I have three options, based on the selection I need to show the appropriate felxigrid, how do I do that?

$(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;
  });
 }

Like this I have two more flexigrids in my page, I want to show a flexigrid on each opetion selected in the drop down list. Any idea on this?

Answer 1

I took div with unique id for all the grid tables.

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

Put options to which I want to see with an event

 <select name="options" onchange="javascript:showflexi(this.value)">
        <option value="0" selected="selected">Choose one</option>
        <option value="1">1st Table</option>
        <option value="2">2nd Table</option>
        <option value="3">3rd Table</option>
    </select>

Now, I have added two line of code inside the

$(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

Now I have added the showflexi() function to do the action with Choosing the table number

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'); 
        }
}