Show/hide elements based on a selected option with javascript

Question

I'm currently working on a website (I'm new to HTML, CSS, JavaScript and I haven't worked with JQuery) and I made a form in which users can select the type of candy they want from a list:

<form class="form-horizontal" method="POST" enctype="multipart/form-data">
        <div class="form-group">
            <label for="selectCandy" class="control-label col-sm-0"></label>
            <div class="col-sm-4">
                <select class="form-control" id="selectC">
                    <option id="candy1" onclick="document.getElementById('noCandy1').style.display='block'; return false;">Lollipop</option>
                    <option id="candy2" onclick="document.getElementById('noCandy2').style.display='block'; return false;">Haribo Gummies</option>
                    <option id="candy3" onclick="document.getElementById('noCandy3').style.display='block'; return false;">Gum</option>
                </select>
            </div>

The idea is that when they select the type of candy, a new form will appear, allowing them to choose the amount of candy they want. The amount of candy they can select is different depending on the product. For instance, if the choose 'Lollipop' they can select from 1 to 6; if they choose Haribo, they can only select from 1 to 2. Here's the code for that:

<div id="noCandy1">
        <select class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            </select>
        </div>
<div id="noCandy2">
        <select class="form-control">
            <option>1</option>
            <option>2</option>
            </select>
        </div>
<div id="noCandy3">
        <select class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            </select>
        </div>

As I stated before, I'm new to all of this, and I'm not sure if I should add some JavaScript or if it would be possible to do this by using CSS. My problem is that the divs that are supposed to appear when an option is chosen are displayed all the time. What can I do for a div to appear only when one of the options of the previous form is selected? Thank you very much!

Answer 1

Here's one way do accomplish what you're after

 // Function to add event listener to table var el = document.getElementById("selectC"); el.addEventListener("change", function() { var elems = document.querySelectorAll('#noCandy1,#noCandy2,#noCandy3') for (var i = 0; i < elems.length; i++) { elems[i].style.display = 'none' } if (this.selectedIndex === 0) { document.querySelector('#noCandy1').style.display = 'block'; } else if (this.selectedIndex === 1) { document.querySelector('#noCandy2').style.display = 'block'; }else if (this.selectedIndex === 2) { document.querySelector('#noCandy3').style.display = 'block'; } }, false);

 #noCandy1,#noCandy2,#noCandy3 { display:none; }

 <form class="form-horizontal" method="POST" enctype="multipart/form-data"> <div class="form-group"> <label for="selectCandy" class="control-label col-sm-0"></label> <div class="col-sm-4"> <select class="form-control" id="selectC"> <option id="candy1">Lollipop</option> <option id="candy2">Haribo Gummies</option> <option id="candy3">Gum</option> </select> </div> </div> </form> <div id="noCandy1"> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> </select> </div> <div id="noCandy2"> <select class="form-control"> <option>1</option> <option>2</option> </select> </div> <div id="noCandy3"> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </div>

The JavaScript above binds the change event listener to a function that first hides all your select elements containers. Note that using event handlers is preferred over writing inline JavaScript like you did in your example. Then, the code loops over your select elements containers and checks to see which one should be shown.

For reference see:

• https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
• https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Answer 2

The best way to approach this scenario would be to use a function . This will not only save you from a lot of unnecessary code, but also make your website more readable and maintainable.

For each option, instead of using

onclick="document.getElementById('noCandy1').style.display='block'; ,

Use

onclick = "show_form('noCandy1')" , where noCandy1 is your desired form part.

Then you would declare show_form() in the javascript like such:

function show_form(candy){
    document.getElementsByClassName('candy_form').style.display = 'none'; //Hide forms
    document.getElementById(candy).style.display='block'; //Show desired form
    return true;
}

Here is how the HTML should be structured for this to work:

<html>
    <form>

        <select id = "selectC">
            <option onclick = "show_form('noCandy1')">Lollipop</option>
            <option onclick = "show_form('noCandy2')">Haribo Gummies </option>
            <option onclick = "show_form('noCandy3')">Gum</option>
        </select>

        <div class="candy_form" id="noCandy1">
            Form for Lollipops
        </div>
        <div class="candy_form" id="noCandy2">
            Form for Haribo Gummies
        </div>
        <div class="candy_form" id="noCandy3">
            Form for Gum.
        </div>

    </form>
<html>

Answer 3

Using jQuery is pretty simple to do this.

Your filter:

<select>
  <option value="0">All</option>
  <option value="candy">Candy</option>
  <option value="nocandy">No candy</option>
</select>

The table of contents:

<table border="1">
  <tr class="candy">
    <td>Candy 1</td>
  </tr>
  <tr class="candy">
    <td>Candy 2</td>
  </tr>
  <tr class="nocandy">
    <td>No candy here</td>
  </tr>
  <tr class="candy">
    <td>Candy 3</td>
  </tr>
  <tr class="nocandy">
    <td>No candy here too</td>
  </tr>
</table>

Note that each table TR has a class to identify its type. If has a candy or has not.

On Javascript you just do like this:

$(function() { // On page ready
    $('select').change(function() { // On change this select
    var _this = $(this);
    if ( _this.val() == 0 )
        $('tr').show(); // Will show all lines
    else {
        $('tr').hide(); // Will hide all lines
        $('tr.' + _this.val()).show(); // Will show only selected lines
    }
  });
});

You can see this working on this Fiddle I did for you.

Answer 4

If using jQuery is an option, you can do like this:

The HTML:

<select>
  <option value="">All items</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<p>
Table of items
</p>
<table id="my-table-of-items" border="1">
  <tr class="items-1">
    <td>item 1</td>
  </tr>
  <tr class="items-1">
    <td>item 1</td>
  </tr>
  <tr class="items-2">
    <td>item 2</td>
  </tr>
  <tr class="items-2">
    <td>item 2</td>
  </tr>
  <tr class="items-2">
    <td>item 2</td>
  </tr>
  <tr class="items-2">
    <td>item 2</td>
  </tr>
  <tr class="items-1">
    <td>item 1</td>
  </tr>
  <tr class="items-3">
    <td>item 3</td>
  </tr>
  <tr class="items-2">
    <td>item 2</td>
  </tr>
  <tr class="items-1">
    <td>item 1</td>
  </tr>
</table>

The Javascript:

$(function() {
    $('select').change(function() {
    var _this = $(this);
    if ( _this.val() == '' )
        $('table tr').show();
    else {
        $('table tr').hide();
      $('table tr.items-' + _this.val()).show();
        }
  });
});

You can see a result in this Fiddle