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

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
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?
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>
                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.
– Annabel
                Aug 20, 2014 at 18:44
                @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.
– always-a-learner
                Jan 10, 2017 at 7:35
Try handling the change event of the select and using this.value to determine whether it's 'Yes' or not.
jsFiddle
document.getElementById('test').addEventListener('change', function () {
    var style = this.value == 1 ? 'block' : 'none';
    document.getElementById('hidden_div').style.display = style;
<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>
                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.
– S.Slusky
                Dec 20, 2022 at 0:37
                @S.Slusky you're right, it's called a ternary operator and is essentially an inline if/else statement.
– Daniel Imms
                Dec 23, 2022 at 17:58
<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=";">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>
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);
Specify the start condition in the text field ()
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=";"/>
<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 id="div2" style=";">
    <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>
<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>
<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>
     <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=";" 
            name="Extension for area validity sought for details" 
            class="form-control" 
            value="" 
            placeholder="">
<script>
    function CommonShowHide(ElementId, element, value) {
         document
             .getElementById(ElementId)
             .style
             .display = element.value == value ? 'block' : 'none';
</script>
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>
                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.
– Cristik
                Feb 2, 2022 at 15:20
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';
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.