JQuery multiple select show / hide

Question

I have a table with a language translation. I am trying to create a script that will hide several columns of the language. The problem is that it only hides one field at a time. I cannot hide multiple language entries. Demo

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

<select class="hide" multiple="">
    <option value="0">ignore_id</option>
    <option value="1">English</option>
    <option value="2">French Can</option>
    <option value="3">Simp. Chinese</option>
    <option value="4">Spanish</option>
    <option value="5">Japanese</option>
    <option value="6">Trad. Chinese</option>
    <option value="7">Russian</option>
    <option value="8">Malay</option>
    <option value="9">Swedish</option>
    <option value="10">Finnish</option>
    <option value="11">Italian</option>
    <option value="12">German</option>
    <option value="13">Danish</option>
</select>
<table width="100%" cellspacing="0" cellpadding="2" border="0" id="table">
    <thead>
        <tr class="headings">
            <th align="left" class="cell0" style="display: table-cell;"><b>ignore_id</b>

            </th>
            <th align="left" class="cell1" style="display: table-cell;"><b>English</b>

            </th>
            <th align="left" class="cell2" style="display: none;"><b>French Can</b>

            </th>
            <th align="left" class="cell3" style="display: table-cell;"><b>Simp. Chinese</b>

            </th>
            <th align="left" class="cell4"><b>Spanish</b>

            </th>
            <th align="left" class="cell5"><b>Japanese</b>

            </th>
            <th align="left" class="cell6"><b>Trad. Chinese</b>

            </th>
            <th align="left" class="cell7"><b>Russian</b>

            </th>
            <th align="left" class="cell8"><b>Malay</b>

            </th>
            <th align="left" class="cell9"><b>Swedish</b>

            </th>
            <th align="left" class="cell10"><b>Finnish</b>

            </th>
            <th align="left" class="cell11"><b>Italian</b>

            </th>
            <th align="left" class="cell12" style="display: table-cell;"><b>German</b>

            </th>
            <th align="left" class="cell13"><b>Danish</b>

            </th>
            <th align="left">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td align="left" class="cell0" style="display: table-cell;">79891</td>
            <td align="left" class="cell1" style="display: table-cell;">test</td>
            <td align="left" class="cell2" style="display: none;">Hello World</td>
            <td align="left" class="cell3" style="display: table-cell;">你好世界</td>
            <td align="left" class="cell4">hello</td>
            <td align="left" class="cell5">ハローワールド</td>
            <td align="left" class="cell6">你好世界</td>
            <td align="left" class="cell7"> </td>
            <td align="left" class="cell8">malajec</td>
            <td align="left" class="cell9">swed</td>
            <td align="left" class="cell10">fin</td>
            <td align="left" class="cell11">talo</td>
            <td align="left" class="cell12" style="display: table-cell;">gero</td>
            <td align="left" class="cell13">Život</td>
            <td><span class="edit_b"></span><span class="remove_b"></span>

            </td>
        </tr>
        <tr>
            <td align="left" class="cell0" style="display: table-cell;">79927</td>
            <td align="left" class="cell1" style="display: table-cell;">test</td>
            <td align="left" class="cell2" style="display: none;"></td>
            <td align="left" class="cell3" style="display: table-cell;">sgs</td>
            <td align="left" class="cell4"></td>
            <td align="left" class="cell5"></td>
            <td align="left" class="cell6"></td>
            <td align="left" class="cell7"></td>
            <td align="left" class="cell8"></td>
            <td align="left" class="cell9"></td>
            <td align="left" class="cell10"></td>
            <td align="left" class="cell11"></td>
            <td align="left" class="cell12" style="display: table-cell;"></td>
            <td align="left" class="cell13"></td>
            <td><span class="edit_b"></span><span class="remove_b"></span>

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

Answer 1

The problem is the 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 2

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

Answer 3

, :

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

Answer 4

JS :

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

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

Fiddle