堆栈内存溢出
  繁体   English   中英

使用javascript根据选定的选项显示/隐藏元素

[英]Show/hide elements based on a selected option with javascript

 原文  2017-06-29 18:45:53  4   4    javascript/ html/ css/ forms

问题描述

我目前正在一个网站上工作（我是 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>

这个想法是，当他们选择糖果类型时，会出现一个新表格，允许他们选择他们想要的糖果数量。 他们可以选择的糖果数量因产品而异。 例如，如果选择“棒棒糖”，他们可以从 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做什么？ 非常感谢！

4 个解决方案

解决方案1
 2  2017-06-29 19:44:06

这是完成您所追求的事情的一种方法

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

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

参考：

解决方案2
 0  2017-06-29 19:38:29

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

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

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>

解决方案3
 0  2017-06-29 20:01:05

使用 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
    }
  });
});

你可以在我为你做的这个 Fiddle上看到这个。

解决方案4
 0  2017-06-30 13:55:08

如果使用 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();
        }
  });
});

你可以在这个 Fiddle 中看到结果

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 jQuery：根据从下拉列表中选择的选项显示/隐藏元素 根据Javascript中的选定选项值显示/隐藏div 根据选择的选项显示/隐藏 div jQuery：基于所选选项显示/隐藏元素 根据所选选项显示/隐藏不同的 forms 基于选项选择的Javascript显示/隐藏 Javascript隐藏选定的选项 使用Jquery根据选定的下拉选项隐藏表单元素 Javascript：根据元素的 class 显示/隐藏元素 Javascript - 禁用基于所选选项的选择选项元素
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM