jQuery column hide

I have a drop down with the same name as column headers.

<select id='showHideColumns'>
<option value='-1'> Show all </option> 
<option value='GroupA'> GroupA </option> 
<option value='GroupB'> GroupB </option> 
</select>

My columns have same name as the value like <td class='GroupA'> //data </td>

How can I show/hide column using Jquery?

I only know uptill this much:

if($("#showHideColumns).val()=="GroupA")
$(".GroupA").toggle()
else if ($("#showHideColumns).val()=="GroupB")
$(".GroupB").toggle()

Can I reduce ABOVE code :

I was hoping of something of the lines : ($("#showH开发者_JS百科ideColumns).val().toggle() but not sure of this

If anyone could help me reduce above line that would really of great help.

---

$('.' + $('#showHideColumns').val()).toggle(); should do the trick. you were close.

---

Tyr this

if($("#showHideColumns").val() != -1)
      $("."+$("#showHideColumns").val()).toggle()

---

$('#showHideColumns').change(function() {
  $('table td').hide().('.'+$(this).val()).show();
});

Set 'table td' to be whatever selector is necessary to select ALL the columns. If you do not hide all the columns first, you will not have the other columns disappear when you select a certain column.