Question

我会尝试解释这个问题。我在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>

Answer 1

试试这个

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

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

Answer 2

.val() select元素的

multiple方法返回所选值的数组，您可以.join()使用生成的选择器$('#seasons').on('change', function() { var selector = this.selectedIndex > -1 ? '.' + $(this).val().join(',.') : null; $('table').hide().filter(selector).show(); });值并过滤表。

{{1}}

http://jsfiddle.net/Frm5a/

Answer 3

您可以将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();
    }
})

演示：Fiddle

如何使用select标签使元素可见？

3 个答案: