Show/hide elements based on a selected option with javascript

前端未结

关注

 4  759

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

相关标签:

4条回答

一生所求

2020-12-19 23:58

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.

0 讨论(0)

迷失自我

2020-12-20 00:13

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

0 讨论(0)

無奈伤痛

2020-12-20 00:18

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>

0 讨论(0)

情话喂你

2020-12-20 00:21

Please ignore some of the rude comments you received. 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 handler 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

0 讨论(0)