so46571527

How to change a css declaration by the value of a selected drop down box option

by Stephen

HTML

<script>
$(document).ready(function() {
    var val = $('#cat1').val();
    $('.epcCatHide6').toggle( val == '3' ); });
</script>

Pick <em>Blah Blah = 3</em> to show the other select control.
<div class="plain">
    <select name="epcCat[1]" id="cat1" class="formElements category">
        <option value="1">Blah = 1</option>
        <option value="3" selected>Blah Blah = 3</option>
        <option value="4">Blah Blah Blah = 4</option>
        <option value="5">Etc = 5</option>
        <option value="180">Etc Etc = 180</option>
    </select>
</div>

<div class="epcCatHide6">
    <select name="epcCat[6]" id="cat6" class="formElements category">
        <option value="0">-----</option>
        <option value="181">12</option>
        <option value="182">11</option>
        <option value="183">10</option>
    </select>
</div>

CSS

.epcCatHide6 {
  display: none;
}

JavaScript

$('body').on('change','[name="epcCat[1]"]', function() {
    var val = $(this).val();
    $('.epcCatHide6').toggle( val == '3' ); // shows when 3, hides when anything else.
});