Как сделать элемент видимым или нет с помощью тега выбора?

Question

Как сделать элемент видимым или нет с помощью тега выбора?

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>

Giacomo Cerquone 24 сен. 2013, в 08:41

Источник

Теги:

javascript

jquery

html

select

option

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()..

bipen 24 сен. 2013, в 04:08

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

Демо: скрипка

Arun P Johny 24 сен. 2013, в 04:16

Ещё вопросы

undefined · Accepted Answer · 2013-09-24T03-37-00.000Z

.val() для multiple элементов выбора возвращает массив выбранных значений, вы можете .join() значения и фильтровать таблицы с помощью сгенерированного селектора.

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

http://jsfiddle.net/Frm5a/

Я не могу голосовать за вас, но я бы действительно сделал это, потому что вы помогли мне с этой функцией. Я добавляю только $ ('table'). Hide (); скрыть все таблицы до этой функции. Во всяком случае, я буду изучать это, спасибо большое!
@undefined необходимо обработать случай, когда все выбранные элементы не выбраны