html - 单击按钮后显示列

Question

I've been playing around with HTML and I created a column that immediately appears when I open my file in a browser.我一直在玩 HTML，我创建了一个列，当我在浏览器中打开我的文件时，它会立即出现。 I tried moving the column and row classes around but I can't figure out how to get it so that the column doesn't appear until after I select an option from the dropdown menu.我尝试移动列和行类，但我不知道如何获取它，以便在我从下拉菜单中选择一个选项后才显示该列。 I was wondering how I could fix this issue?我想知道如何解决这个问题？

<html>
    <head>
        <title>Testing Display</title>
    </head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .center{
        text-align: center;
        border: 3px solid #73AD21;
    }
    {
        box-sizing: border-box;
    }
    .column {
      float: left;
      width: 30%;
      padding: 10px;
      height: 2000px; 
    }
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    </style>
    <body>

    <div class ="center">
        <p><div><h1>Testing Display</h1></div><br /><p>
    <div class="dropdown">
        <form>
        <select name="list" id="list" accesskey="target" onchange="display(this)"> 
            <option value="none">Choose an option</option>
            <option value="one">Option one</option> 
        </select>
        <input type=button value="Select" onclick="display()"/>
        <div id="add"></div>
        </form>
        </div>
    </div>
    <div class="row">
      <div class="column" style="background-color:#aaa;">
        <h2>Column 1</h2>
        <p>Some text..</p>
        <div id="div"></div> 
      </div>
    </div>
        <script src="order.js"></script>
    </body>
</html>

Answer 1

Javascript Solution, call this method in onchange event of drop down list: Javascript 解决方案，在下拉列表的 onchange 事件中调用此方法：

function ddlChange(){
if (document.getElementById("list").value === "one"){
        document.getElementsByClassName("column").style.display = "table-cell";
    }     
}

Using jQuery:使用jQuery：

$("#list").change(function () {
           if($('#list option:selected').val() === "one")
               $(".column").css("display","table-cell");
 });

Alternatively, you can also try to add or remove a class instead of changing inline CSS value.或者，您也可以尝试添加或删除类，而不是更改内联 CSS 值。

Answer 2

Have the initial visibility of column to hidden.将列的初始可见性设置为隐藏。

Have a Javascript function to add a new class to column onChange.有一个 Javascript 函数来向 onChange 列添加一个新类。 Something like this像这样的东西

function onSelect() {
  //or add id to easily access unique single element.
  var element = document.getElementByClassName("column")[0];
  element.classList.add("showCol");
} 

.column {
  visibility: hidden;
  ...
}
.showCol {
  visibility: visible;
  ...
}

Can also add styles and remove style onChange instead of toggling classes.还可以添加样式和删除样式 onChange 而不是切换类。

html - 单击按钮后显示列

问题描述

2 个解决方案

解决方案1
0 2020-01-31 23:22:27

解决方案2
0 2020-01-31 23:29:39

html - 单击按钮后显示列

问题描述

2 个解决方案

解决方案1 0 2020-01-31 23:22:27

解决方案2 0 2020-01-31 23:29:39

解决方案1
0 2020-01-31 23:22:27

解决方案2
0 2020-01-31 23:29:39