0

我会试着解释这个问题。我在 html 中有这个选择：

<select id="seasons" multiple="multiple">
    <option value="s01">Stagione 1</option>
    <option value="s02">Stagione 2</option>
    <option value="s03">Stagione 3</option>
    <option value="s04">Stagione 4</option>
    <option value="s08">Stagione 8</option>
</select>

所以你可以看到它是一个多选。现在我必须检查已选择的项目并仅显示所选项目，而未选择的项目必须隐藏。

我必须显示或隐藏的元素的类等于这些选项的值（元素是表格）：

<table class="s01">
  ...
</table>
4

3 回答 3

2

试试这个

  $(function(){
  $('table').hide(); //<--this hides all the table
  $('#seasons').change(function(){
      $.each($(this).val(),function(i,v){
         $('.'+v).show();
      }
 });
 });

因为，$('table').hide();隐藏文档中存在的所有表格......您可以将相同的类添加到要隐藏的特定表格并使用类选择器$('.tableClass').hide()..

于 2013-09-24T06:20:46.817 回答
2

.val()select 元素的方法multiple返回所选值的数组，您可以.join()使用生成的选择器来过滤值和过滤表。

$('#seasons').on('change', function() {
    var selector = this.selectedIndex > -1 ? '.' + $(this).val().join(',.') : null;
    $('table').hide().filter(selector).show();
});

http://jsfiddle.net/Frm5a/

于 2013-09-24T06:21:37.560 回答
0

您可以将一个类与该类s一起添加到所有目标元素中sxx

<table class="s s02">
    <tr>
        <td>01</td>
    </tr>
</table>

然后

var $els = $('.s').hide();
$('#seasons').change(function () {
    var selected = $(this).val(),
        $sel;
    if (selected && selected.length > 0) {
        $sel = $els.filter('.' + selected.join(', .')).show();
        $els.not($sel).hide();
    } else {
        $els.hide();
    }
})

演示：小提琴

于 2013-09-24T06:22:54.277 回答