jQuery多选显示/隐藏

jQuery multiple select show/hide

本文关键字：隐藏 显示 jQuery      更新时间：2023-09-26

我有一个语言翻译表。我正在尝试创建一个隐藏多个语言列的脚本。问题是它一次只隐藏一个字段。我无法隐藏多个语言条目。演示

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

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

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

演示：

http://jsfiddle.net/LAZeX/

迭代循环时，需要隐藏每个选定的选项，如下所示：

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

工作演示

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

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

Fiddle

相关文章：