Change background of next div depending on selected item in dropdown

[ViKKKing]

Hello,

I have many “select”, with different IDs and same class:

<div class="objvalide">
<select id="obj1-1" class="swit">
    <option selected="selected" value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<div class="switchy-container">
    <div class="switchy-bar">
        <div class="switchy-slider" draggable="true" style="left: 0px;"></div>
    </div>
</div>
</div>
<div class="objvalide">
<select id="obj1-2" class="swit">
    <option selected="selected" value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<div class="switchy-container">
    <div class="switchy-bar">
        <div class="switchy-slider" draggable="true" style="left: 0px;"></div>
    </div>
</div>
</div>

… and more …

Here’s the JS I have so far:

$(function() {
$('.swit').switchy();
$('.swit').change(function() {

        var select = $(this);
        var id = select.attr('id'); /* alert(id); <- Works fine, I get the correct ID */
        var valopt = $(this).val(); /* alert(valopt); <- Works fine, I get the correct value */
    /* what do I have to do here or somewhere else in order to have .switchy-bar bg change color only for this particular .objvalide > .switchy-container > .switchy-bar ? */
    });
});

At the beginning, all options of dropdown-lists are “0”.
Each and every .switchy-bar DIV background is white.

When I select option value “1” in obj1-2 for instance, I need the
background of its .switchy-bar to be red. If I select option value “2”,
background of its .switchy-bar has to be green.

The other select and background must remain untouched.

Can you help with this ?

Thanks

[megazoid]

var color = valopt == 1 ? 'red' : 'green';
$(select).
    siblings('.switchy-container').
    find('.switchy-bar').
    css({backgroundColor: color});