时间戳

首页 > 解决方案 > 在列表中显示和隐藏文本

javascript - 在列表中显示和隐藏文本

问题描述

我想在从列表中选择某些内容时显示特定文本，并在选择其他内容时隐藏它。我在 w3Schools 上找到了按钮示例，当您单击文本时，文本会出现，当您再次单击它时，文本会消失。我将如何在列表中激活与此类似的内容？我希望一切都在 JavaScript 中，因为我正在尝试学习它。

<!DOCTYPE html>
<html>

<body>
    <button onclick="myFunction()">Click Me!</button>

    <select onchange="myFunction(this)">
        <option>Apple</option>
        <option>Orange</option>
        <option>Pineapple</option>
        <option>Banana</option>
    </select>

    <div id="myDIV">
        This is my DIV element.
    </div>

    <div id="Apple">
        Apples are awesome.
    </div>

    <div id="Orange">
        Oranges are sower.
    </div>

    <div id="Pineapple">
        Pineapple are sower.
    </div>

    <div id="Banana">
        Bananas are sticky.
    </div>



    <script>
        function myFunction() {
            var x = document.getElementById("myDIV");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
    </script>
    
</body>
</html>

标签： javascripthtml

解决方案

  • 获取results和myBtn标签。
  • variables为每个option文本创建。
  • 创建一个select标签并将其附加到divthat has box id。
  • 创建一个（ “未选择选项”文本array of objects的第一个为空）。options
  • 将选项附加到列表
  • 当我们点击时myBtn，指定selectedOption variable来保存option value被选中的，然后选中它来value添加。optionText valueresults div

const results = document.getElementById('results');
const myBtn = document.getElementById('myBtn');
let appleText = "Apples are awesome.";
let orangeText = "Oranges are sower.";
let pineappleText = "Pineapple are sower.";
let bananaText = "Bananas are sticky.";

(function(){
    const selectList = document.createElement('select');
    selectList.setAttribute("id", "selectList");

    function create_select_list(){
        const output = [];
        theOptionsArray.forEach((option) => {
            let optionTag = 
            `<option value="${option.value}">${option.name}</option>`;
            output.push(optionTag);
            selectList.innerHTML = output.join('');
        });
        box.appendChild(selectList);
    }

    const box = document.getElementById('box');
    const theOptionsArray = [    
        {value: '', name: ''},
        {value: 'apple', name: 'Apple'},
        {value: 'orange', name: 'Orange'},
        {value: 'pineapple', name: 'Pineapple'},
        {value: 'banana', name: 'Banana'}
    ];
    // Run the function
    create_select_list();
    let selectedOption;
    myBtn.addEventListener('click', () => {
        selectedOption = selectList.value;
        if(selectedOption == 'apple'){
          results.innerHTML = appleText;
        } else if (selectedOption == 'orange'){
            results.innerHTML = orangeText;
        } else if(selectedOption == 'pineapple'){
            results.innerHTML = pineappleText;
        } else if(selectedOption == 'banana'){
            results.innerHTML = bananaText;
        } else if (selectedOption == ''){
            results.innerHTML = 'No option is selected';
        }
    });

})();
<div id="box">
    <button id="myBtn">Click</button>
</div>
<div id="results">Select an option</div>

推荐阅读