Hide & Unhide Div Based on Drop Down Selection

Stacey Fontenot
Stacey Fontenot used Ask the Experts™
on
I have an MVC C# Web Application and have a text area input field that needs to be hidden when the page loads. I also have a drop down input field that a user picks a value from the drop down list. What I'm trying to do is if the user selects "Free Text" option with a value of "55" from (add_Time_Description_ID) input, the div area (divTimeNotes) becomes visible. So...this div area will toggle hidden/unhide based on the drop down selection. If page loads and the drop down does not = 55, div is hidden. I'd like to do this with Javascript but am having issues accomplishing. Can someone assist. See input names below:

                <div class="row mg-t-20">
                    <label class="col-sm-5 form-control-label">Time Description:</label>
                    <div class="col-sm-6 mg-t-10 mg-sm-t-0">
                        <select name="Time_Description_ID" id="add_Time_Description_ID" class="form-control" required>
                            <option value="">Select a Time Description</option>
                            @{
                                foreach (TimeDescription timeDescription in Model.TimeDescriptions)
                                {
                                    <option value="@timeDescription.Time_Description_ID">@timeDescription.Time_Name</option>
                                }
                            }
                        </select>
                    </div>
                    <label class="col-sm-1 form-control-label"><span class="tx-danger">*</span></label>
                </div>

                <div class="row mg-t-20" id="divTimeNotes" style="display:none;">
                    <label class="col-sm-5 form-control-label">Time Notes:</label>
                    <div class="col-sm-6 mg-t-10 mg-sm-t-0">
                        <textarea name="Time_Notes" id="add_Time_Notes" class="form-control" style="min-height:200px;" placeholder="Description"></textarea>
                    </div>
                    <label class="col-sm-1 form-control-label"></label>
                </div>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

Commented:
Since you're using bootstrap, I suppose you've already jQuery library included so I think what you need is attaching a change event listener to the first select then check if "Free Text" is selected show the div else hide it like :

$(function(){
  $('body').on('change', '#add_Time_Description_ID', function(){
    if( $(this).val() === '55'){
      $('#divTimeNotes').show();
    }else{
      $('#divTimeNotes').hide();
    }
  });
})

Open in new window

Working fiddle
Analyst Developer
Distinguished Expert 2018
Commented:
Here is a pure JS solution :

document.addEventListener("DOMContentLoaded", function() {
  var div = document.getElementById('divTimeNotes');

  document.querySelector('#add_Time_Description_ID').addEventListener('change', function() {
    if (this.value === '55') {
      div.style.display = 'block';
    } else {
      div.style.display = 'none';
    }
  });
});

Open in new window

Working fiddle

Author

Commented:
Excellent.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial