CODEWITHSUNDEEP
javascripthtmljqueryhtml-select
Giacomo Cerquone
Giacomo Cerquone

Reputation: 2479

How can I make an element visible or not with the select tag?

I'll try to explain the problem. I have this select in 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>

So as you can see it's a multiple select. Now I have to check wich is selected and display only the selected item while, those not selected, must be hidden.

The element that I have to show or hide, has a class equal to the value of these option (the element it's a table):

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

Upvotes: 0

Views: 143

Answers (3)

Ram
Ram

Reputation: 144669

.val() method for multiple select elements returns an array of the selected values, you can .join() the values and filter the tables using the generated selector.

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

http://jsfiddle.net/Frm5a/

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

You can add a class s to all the target elements along with the sxx class then

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

then

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

Demo: Fiddle

Upvotes: 0

bipen
bipen

Reputation: 36531

try this

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

since, $('table').hide(); hides all the table present in the document... you can add same class to specific tables that you want to hide and use class selector $('.tableClass').hide()..

Upvotes: 2

Related Questions