jQuery multiple select show/hide

Question

I have a table with language translation. I\'m trying to create a script that will hide multiple language columns. The problem is that it only hide one field at a time. I ca

Answer 1

$(document).ready(function () {
    $( ".hide" ).change(function() {
        var value = $( this ).val();
        $('[class^=cell]').hide();
        $( ".cell" + value ).show();        
    })
});

Fiddle

Answer 2

Problem is in code $(".cell" + str) after each block, move your code to hide in each section.

$(".hide").change(function () {
    $('[class^=cell]').show();
    $(".hide option:selected").each(function () {
        $(".cell" + $(this).val()).hide();
    });
}).trigger("change");

DEMO

Answer 3

Replace your JS with this:

$(document).ready(function () {
   $( ".hide" ).change(function() {
   var str = [];
   $('[class^=cell]').show();
   $( ".hide option:selected" ).each(function() {
      var vq = $( this ).val();
      $('.cell'+vq).hide();    
   });
})
.trigger( "change" );
});

Answer 4

You need to hide every selected option while iterating loop like below :

$( ".hide" ).change(function() {
    var str = "";
    $('[class^=cell]').show();
   $( ".hide option:selected" ).each(function() {
       str = $( this ).val();
       $( ".cell" + str ).hide();
    });
}).trigger( "change" );

Working Demo

Answer 5

$(document).ready(function () {
$(".hide" ).change(function() {
var str = [];
$(".hide option:selected").each(function() {
str.push($( this ).val());
});
$('[class^=cell]').show();
for(i=0; i<str.length; i++){
 $( ".cell" + str[i] ).hide();
}
}).trigger( "change" );
});

Demo:

http://jsfiddle.net/LAZeX/