Question

我目前在一个网站上工作（我不熟悉HTML，CSS，JavaScript，我还没有使用过JQuery）我创建了一个表单，用户可以在其中选择他们想从列表中找到糖果：

<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>

这个想法是，当他们选择糖果类型时，会出现一个新表格，允许他们选择他们想要的糖果量。他们可以选择的糖果量因产品而异。例如，如果选择棒棒糖＆＃39;他们可以选择1到6;如果他们选择Haribo，他们只能从1到2中选择。以下是代码：

<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>

正如我之前所说的，我对所有这些都是新手，我不确定是否应该添加一些JavaScript，或者是否可以通过使用CSS来实现这一点。我的问题是，在选择选项时应该出现的div会一直显示。只有在选择了上一个表单的其中一个选项时，才能使div出现？非常感谢你！

Answer 1

请忽略您收到的一些粗鲁评论。这是完成你所追求的一种方式

pcolor

// 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;
}

上面的JavaScript将change事件处理程序绑定到一个首先隐藏所有select元素容器的函数。请注意，使用事件处理程序比编写内联JavaScript更受欢迎，就像您在示例中所做的那样。然后，代码循环遍历select元素容器并检查应该显示哪个容器。

供参考：

Answer 2

处理此方案的最佳方法是使用功能。这不仅可以为您节省大量不必要的代码，还可以使您的网站更具可读性和可维护性。

对于每个选项，而不是使用

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

使用

onclick = "show_form('noCandy1')"，其中noCandy1是您所需的表单部分。

然后你会在javascript中声明show_form()，如：

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

以下是如何构建HTML以使其工作：

<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

使用jQuery非常简单。

您的过滤器：

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

<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>

请注意，每个表TR都有一个类来标识其类型。如果有糖果或没有糖果。

在Javascript上你就是这样做的：

$(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
    }
  });
});

你可以看到我在为你做的this Fiddle工作。

Answer 4

如果使用jQuery是一个选项，你可以这样做：

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>

Javascript：

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

您可以在this Fiddle

中看到结果

使用javascript显示/隐藏基于所选选项的元素

4 个答案: