提问人：Grasper 提问时间：6/13/2014 最后编辑：Grasper 更新时间：6/13/2014 访问量：3273
jQuery 多个选择显示/隐藏
jQuery multiple select show/hide
问：
我有一张带有语言翻译的表格。我正在尝试创建一个将隐藏多个语言列的脚本。问题是它一次只隐藏一个字段。我无法隐藏多个语言条目。演示
$(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>
答：
3赞
Satpal
6/13/2014
#1
问题出在每个块之后的代码中，移动代码以隐藏在每个部分中。$(".cell" + str)
$(".hide").change(function () {
$('[class^=cell]').show();
$(".hide option:selected").each(function () {
$(".cell" + $(this).val()).hide();
});
}).trigger("change");
评论
0赞
Nabil Kadimi
6/13/2014
@Grasper 请随时接受并可能为此答案投赞成票。
0赞
Satpal
6/13/2014
@NabilKadimi，Grasper 没有足够的代表来投票。
1赞
RGS
6/13/2014
#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" );
});
演示：
1赞
Bhushan Kawadkar
6/13/2014
#3
您需要在迭代循环时隐藏每个选定的选项，如下所示：
$( ".hide" ).change(function() {
var str = "";
$('[class^=cell]').show();
$( ".hide option:selected" ).each(function() {
str = $( this ).val();
$( ".cell" + str ).hide();
});
}).trigger( "change" );
0赞
Sankalp Bhatt
6/13/2014
#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" );
});
0赞
Dmitry Zaets
6/13/2014
#5
$(document).ready(function () {
$( ".hide" ).change(function() {
var value = $( this ).val();
$('[class^=cell]').hide();
$( ".cell" + value ).show();
})
});
评论