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 can't 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>

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 can't 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>

• javascript
• jquery
• html
• css

• 2 What HTML is this supposed to work with? – David Thomas Commented Jun 13, 2014 at 11:49
• 2 @DavidThomas it's there in the fiddle... – T J Commented Jun 13, 2014 at 11:51
• 1 HTML is in the fiddle. I didn't want to add it here as it would be too long. – Grasper Commented Jun 13, 2014 at 11:53
• @TJ: and it should be here in the question. Grasper: if the HTML is 'too long' then you need to work out some way of reproducing your problem with a minimal amount of code, otherwise when, or if, JS Fiddle fails this question bees immediately useless. For further information please read the 'MCVE' help page. – David Thomas Commented Jun 13, 2014 at 11:57
• @DavidThomas the op won't be able to represent the exact thing by reducing the code – Somnath Kharat Commented Jun 13, 2014 at 12:00

5 Answers 5

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

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

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

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

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

Fiddle