堆棧內存溢出
  簡體   English   中英

使用javascript根據選定的選項顯示/隱藏元素

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

 原文  2017-06-29 18:45:53  8   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