How can I show a hidden div when a select option is selected?

Question

I want to use plain JavaScript. I have a drop down list (<select> with a number of <option>s). When a certain option is selected I want a hidden div to display.

<select id="test" name="form_select">
   <option value="0">No</option>
   <option value ="1" onClick"showDiv()">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>

Then I'm trying it with this vanilla JavaScript code:

function showDiv(){
   document.getElementById('hidden_div').style.display = "block";
}

I'm guessing my problem is with the onClick trigger in my options but I'm unsure on what else to use?

Barney

Answer 1

I think this is an appropriate solution:

<select id="test" name="form_select" onchange="showDiv(this)">
   <option value="0">No</option>
   <option value="1">Yes</option>
</select>
<div id="hidden_div" style="display:none;">Hello hidden content</div>

<script type="text/javascript">
function showDiv(select){
   if(select.value==1){
    document.getElementById('hidden_div').style.display = "block";
   } else{
    document.getElementById('hidden_div').style.display = "none";
   }
} 
</script>

Fibula

Answer 2

try this:

function showDiv(divId, element)
{
    document.getElementById(divId).style.display = element.value == 1 ? 'block' : 'none';
}

#hidden_div {
    display: none;
}

<select id="test" name="form_select" onchange="showDiv('hidden_div', this)">
   <option value="0">No</option>
   <option value="1">Yes</option>
</select>
<div id="hidden_div">This is a hidden div</div>

Hotien

It's a good idea to call the showDiv() function when the page is first loaded as well. The user might be reloading the page having previously selected the 'Yes' option. – Gaze

@Matei Mihai hello, what if we have a more option which we want to disable the div ?? like we have 3 options and selecting the 2 of them will disable the div. hoping you reply Thank You in advance. – Autophyte

Answer 3

Try handling the change event of the select and using this.value to determine whether it's 'Yes' or not.

jsFiddle

JS

document.getElementById('test').addEventListener('change', function () {
    var style = this.value == 1 ? 'block' : 'none';
    document.getElementById('hidden_div').style.display = style;
});

HTML

<select id="test" name="form_select">
   <option value="0">No</option>
   <option value ="1">Yes</option>
</select>

<div id="hidden_div" style="display: none;">Hello hidden content</div>

Liston

This worked really well for me. Can you explain the '?' syntax. It looks like it's replacing an if statement where style is block if true and none if false, but I would like to better understand how this can be used. – Pass

@Pass you're right, it's called a ternary operator and is essentially an inline if/else statement. – Liston

Answer 4

You should hook onto the change event of the <select> element instead of on the individual options.

var select = document.getElementById('test'),
onChange = function(event) {
    var shown = this.options[this.selectedIndex].value == 1;

    document.getElementById('hidden_div').style.display = shown ? 'block' : 'none';
};

// attach event handler
if (window.addEventListener) {
    select.addEventListener('change', onChange, false);
} else {
    // of course, IE < 9 needs special treatment
    select.attachEvent('onchange', function() {
        onChange.apply(select, arguments);
    });
}

Demo

Advocation

Answer 5

Being more generic, passing values from calling element (which is easier to maintain).

• Specify the start condition in the text field (display:none)
• Pass the required option value to show/hide on ("Other")
• Pass the target and field to show/hide ("TitleOther")

function showHideEle(selectSrc, targetEleId, triggerValue) {	
	if(selectSrc.value==triggerValue) {
		document.getElementById(targetEleId).style.display = "inline-block";
	} else {
		document.getElementById(targetEleId).style.display = "none";
	}
} 

<select id="Title"
   onchange="showHideEle(this, 'TitleOther', 'Other')">
      <option value="">-- Choose</option>
      <option value="Mr">Mr</option>
      <option value="Mrs">Mrs</option>
      <option value="Miss">Miss</option>
      <option value="Other">Other --&gt;</option>						
</select>
<input id="TitleOther" type="text" title="Title other" placeholder="Other title" 
    style="display:none;"/>

Uncut

Answer 6

Check this code. It awesome code for hide div using select item.

HTML

<select name="name" id="cboOptions" onchange="showDiv('div',this)" class="form-control" >
    <option value="1">YES</option>
    <option value="2">NO</option>
</select>

<div id="div1" style="display:block;">
    <input type="text" id="customerName" class="form-control" placeholder="Type Customer Name...">
    <input type="text" style="margin-top: 3px;" id="customerAddress" class="form-control" placeholder="Type Customer Address...">
    <input type="text" style="margin-top: 3px;" id="customerMobile" class="form-control" placeholder="Type Customer Mobile...">
</div>
<div id="div2" style="display:none;">
    <input type="text" list="cars" id="customerID" class="form-control" placeholder="Type Customer Name...">
    <datalist id="cars">
        <option>Value 1</option>
        <option>Value 2</option>
        <option>Value 3</option>
        <option>Value 4</option>
    </datalist>
</div>

JS

<script>
    function showDiv(prefix,chooser) 
    {
            for(var i=0;i<chooser.options.length;i++) 
            {
                var div = document.getElementById(prefix+chooser.options[i].value);
                div.style.display = 'none';
            }

            var selectedOption = (chooser.options[chooser.selectedIndex].value);

            if(selectedOption == "1")
            {
                displayDiv(prefix,"1");
            }
            if(selectedOption == "2")
            {
                displayDiv(prefix,"2");
            }
    }

    function displayDiv(prefix,suffix) 
    {
            var div = document.getElementById(prefix+suffix);
            div.style.display = 'block';
    }
</script>

Consumptive

Answer 7

<select id="test" name="form_select" onchange="showDiv()">
   <option value="0">No</option>
   <option value ="1">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>
<script>
    function showDiv(){
        getSelectValue = document.getElementById("test").value;
        if(getSelectValue == "1"){
            document.getElementById("hidden_div").style.display="block";
        }else{
            document.getElementById("hidden_div").style.display="none";
        }
    }
</script>

Hedwig

Answer 8

you can use the following common function.

<div>
     <select class="form-control" 
             name="Extension for area validity sought for" 
             onchange="CommonShowHide('txtc1opt2', this, 'States')"
     >
         <option value="All India">All India</option>
         <option value="States">States</option>
     </select>

     <input type="text" 
            id="txtc1opt2" 
            style="display:none;" 
            name="Extension for area validity sought for details" 
            class="form-control" 
            value="" 
            placeholder="">

</div>

<script>
    function CommonShowHide(ElementId, element, value) {
         document
             .getElementById(ElementId)
             .style
             .display = element.value == value ? 'block' : 'none';
    }
</script>

Multifarious

Answer 9

function showDiv(divId, element)
{
    document.getElementById(divId).style.display = element.value == 1 ? 'block' : 'none';
}

#hidden_div {
    display: none;
}

<select id="test" name="form_select" onchange="showDiv('hidden_div', this)">
   <option value="0">No</option>
   <option value="1">Yes</option>
</select>
<div id="hidden_div">This is a hidden div</div>

Isogamete

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Glaab

Answer 10

take look at my solution

i want to make visaCard-note div to be visible only if selected cardType is visa

and here is the html

<select name="cardType">
    <option value="1">visa</option>
    <option value="2">mastercard</option>
</select>

here is the js

var visa="1";//visa is selected by default 
$("select[name=cardType]").change(function () {
    document.getElementById('visaCard-note').style.visibility = this.value==visa ? 'visible' : 'hidden';
})

Atlanta