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

Question

I have the following code already that will hide the epcCatHide6 select box on page load, I would like it to only show the epcCatHide6 select box when epcCat[1] option 3 is selected.. This is what I have already,

<select name="epcCat[1]" class="formElements" id="category">
<option value="1">Blah</option>
<option value="3">Blah Blah</option>
<option value="4">Blah Blah Blah</option>
<option value="5">Etc</option>
<option value="180">Etc Etc</option>
</select>

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

<style type="text/css">.epcCatHide6 {display:none}</style>

<script type="text/javascript">
$(document.body).on('change','select[name="epcCat[1]"]',function(){
var newstyle = document.createElement("style");
newstyle.appendChild(document.createTextNode(".epcCatHide6{display:block!important}"));
document.body.appendChild(newstyle);
});
</script>

How can I get this to work when only epcCat[1] option '3' is selected? Many thanks for any advice offered.

Answer 1

You should simply use an onchange handler on the <select> of your choosing. Also, remember to keep your IDs unique.

var d = document;
var el = d.getElementsByName('epcCat[1]')[0];

el.onchange = function()
{
    if(el.value === '3')
    {
        var h = d.getElementsByClassName('epcCatHide6');

        for(var i = 0; i < h.length; i++)
        {
            h[i].style.display = 'block';
        }
    }
    else
    {
        // Do something else
    }
}

Answer 2

Try this, hope your app already contain jQuery library

$('body').on('change','[name="epcCat[1]"]',function(){
        val = $(this).val();
        if(val =="3"){ console.log('its three'); $('.epcCatHide6').show();  }
    });

Answer 3

The answer is "Don't".
Don't change the CSS declaration, instead you can add and remove additional classes which can affect visibility, leaving the .epcCatHide6 CSS declaration alone.

But even easier, since you are already using jQuery, you can use its .show() and .hide() methods.

First, though, you have to fix your HTML — both of your select controls are using id="category" and that's invalid. An id must be unique within a page.
Maybe you mean for both of these to be a "category thing"; in that case it should be class="category" (classes should describe what a thing is , not how a thing looks )
Maybe you really want to identify which is which; then you want two different ids... I'll do both -- change them to classes to make the HTML valid and add a unique id in case you need to target them exactly.

You also define the CSS class .epcCatHide6 but you don't use it anywhere in your HTML... I'll wrap your selects in divs and put that class on a div.

This gives...

<div class="plain">
    <select name="epcCat[1]" id="cat1" class="formElements category">
        <option value="1">Blah</option>
        <option value="3">Blah Blah</option>
        <option value="4">Blah Blah Blah</option>
        <option value="5">Etc</option>
        <option value="180">Etc Etc</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>

Now, when you pick option 3 from epcCat[1] all you have to do is $(".epcCatHide6").show() and when you pick something else, to hide it again, just call $(".epcCatHide6").hide()

$('body').on('change','[name="epcCat[1]"]', function() {
    val = $(this).val();
    if (val == '3') {
        $('.epcCatHide6').show();
    }
    else {
        $('.epcCatHide6').hide();
    }
});

Even better, you can use jQuery .toggle() which takes a parameter telling it to either show or hide -- true -> show and false -> hide.

This makes your handler simpler:

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

Here it is all put together...

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

 .epcCatHide6 { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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">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> 

— or as a fiddle which you can fork and... and... fiddle with.
The updated fiddle includes setting the visibility on page load in case the value of the first select is already 3 .