Question

我正在尝试使用change函数在下拉菜单下方显示一段样式化的文本，问题是触发更改的选项是页面加载时的第一个选项，并且因为该页面已被禁用（它必须是），无法对其进行更改

相反，我想知道是否有替代方法可以在页面加载时更改加载功能

请注意，当从下拉列表中选择任何其他值时，文本将不可见

我还在努力为印刷文本分配班级名称，我已经注释掉了我认为应该起作用的内容

每天都有许多不同的代码示例，尽管我比前几天离得更近，但我仍然找不到正确的方法

<!DOCTYPE html>
<html>

<head>
  <title>Reports</title>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <style type="text/css">
    select {
      outline: none;
    }
  </style>
</head>

<body>
  <select id="reports" class="w3-select w3-border" style="font-size: 20px;" name="reports">
    <option value="0" disabled selected>- Choose -</option>
    <optgroup label="Reports">
      <option value="1">Report 1</option>
      <option value="2">Report 2</option>
      <option value="3">Report 3</option>
      <option value="4">Report 4</option>
    </optgroup>
  </select>

  <script type="text/javascript">
    $(document).ready(function() {
      $('#reports').change(function() {
        if ($(this).val() == "0") {
          var x = document.createElement("div");
          // class = "w3-center w3-text-light-green"
          x.textContent = "Choose Report From Menu";
          document.body.appendChild(x);
        }
      });
    });
  </script>
</body>

</html>

所需的结果是，在页面加载时显示“样式化”文本，而在选择下拉菜单中的任何其他选项时消失

Answer 1

如果您试图在页面加载时一次执行该功能，请尝试执行以下操作：

       $(document).ready(function () {
            function reportsChange() {
                if ($(this).val() == "0") {
                    var x = document.createElement("div");
                    // class = "w3-center w3-text-light-green"
                    x.textContent = "Choose Report From Menu";
                    document.body.appendChild(x);
                }
            }
            $('#reports').change(function () {
                reportsChange();
            });
            reportsChange();
        });

这将在加载页面时执行一次“ reportsChange”功能，并且每当触发on change事件触发时，您就可以使用它。

Answer 2

将onchange="hide()"添加到<select...>并在正文中添加带有文本的div，并在更改后将其隐藏。

<!DOCTYPE html>
<html>
    <head>
        <title>Reports</title>
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <style type="text/css">
            select {
                outline: none;
            }
        </style>
    </head>
    <body>
        <select id="reports" class="w3-select w3-border" style="font-size: 20px;" name="reports" onchange="hide()">
            <option value="0" disabled selected>- Choose -</option>
            <optgroup label="Reports">
                <option value="1">Report 1</option>
                <option value="2">Report 2</option>
                <option value="3">Report 3</option>
                <option value="4">Report 4</option>
            </optgroup>
        </select>
        
        <div id="msg">"Choose Report From Menu"</div>

        <script type="text/javascript">
            function hide() {
                msg.style.display='none';
            };
        </script>
    </body>
</html>

需要替代更改页面加载时触发的功能

2 个答案: