javascript - jQuery 多选显示/隐藏

Question

我有一张带有语言翻译的表格。我正在尝试创建一个脚本来隐藏多个语言列。问题是它一次只隐藏一个字段。我无法隐藏多个语言条目。 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

问题出在代码 $(".cell"+ str) 在每个 block 之后，移动您的代码以隐藏在每个部分中。

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

DEMO