Question

I’ve got a multiple select that I want to use to pick which elements show up in an HTML template window. So I have several options that I want to iterate over, and based on whether it’s been selected, make the preview elements visible or hidden.
I’m going for something like this:

$('#area_select option').each(function(i){
            if($(this).is(':selected')){var $css = {'visibility' : 'visible'}}
            else{var $css = {'visibility' : 'hidden'}}
            $(??????).css($css);            
        });

As you can see, I’m just iterating over each option (I’m pretty sure that syntax works) in my area_select menu, but I don’t know how to make the css get applied to the corresponding piece…. how can I reference my preview elements via my options?

Answer 1

An easier way to go is to call .val() on the multiple select. That returns an array of selected values that you can iterate over.

var array = $('#area_select').val()
$.each(array, function(i,val) {
    // your code
});

So as far as showing the elements is concerned, it would depend on what type of data is stored in the value of the select options.

For an ID, do this:

$(selectorForCollection).css('visibility','hidden');

var array = $('#area_select').val();

$.each(array, function(i,value) {
    $('#' + value).css('visibility','visible');
});

Or if they are class names, do this:

$(selectorForCollection).css('visibility','hidden');

var array = $('#area_select').val();

$.each(array, function(i,value) {
    $('.' + value).css('visibility','visible');
});