Jquery/Javascript link $(this) to an element in a different div?

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

Answer 2

Give each of the options a name corresponding to the ID of the correct piece.

e.g.

<select>
  <option value="whatever">Whatever</option>
  <option value="whatever2">Whatever 2</option>
</select>

Then each of you elements will be contained in a a div like this:

 <div id="whatever-preview">
 <!-- Whatever -->
 </div>

Then your Javascript

$('#area_select option').each(function(i){
        if($(this).is(':selected')){var $css = {'visibility' : 'visible'}}
        else{var $css = {'visibility' : 'hidden'}}
        var div_name = "#" + $(this).attr('value') + "-preview";
        $(div_name).css($css);            
});

Answer 3

Give each option an id referencing the id of the corresponding element in the preview window.

for instance:

 <option id="option-1">This turns on the first option element in the preview window</option>
 <option id="option-2">This turns on the first option element in the preview window</option>

and give the preview window elements similar-ending ids:

 <div id='window-1'>corresponding window preview element</div>

Then in the javascript:

 $("#window-" + $(this).attr('id').split('-')[1]).css($css);

Answer 4

First, give the elements to hide or show the same class but id's matching the options values:

<div class="something" id="val_1">content1</div>
<div class="something" id="val_2">content2</div>
<div class="something" id="val_3">content3</div>
<div class="something" id="val_4">content4</div>

<select id="area_select">
    <option value="val_1">val 1</option>
    <option value="val_2">val 1</option>
    <option value="val_3">val 1</option>
    <option value="val_4">val 1</option>
</select>

then, when the select choosen option changes hide all the stuff and show the selected

$('#area_select').change( function(){
    var val = $(this).val();
    $('.something').hide();
    $('#'+val).show();
    return false;
});