javascript - 如何在选项选择上隐藏 div-6ren

javascript - 如何在选项选择上隐藏 div

转载作者：行者123 更新时间：2023-12-03 11:00:45

我有下面的javascript，当从下拉列表中选择一个选项时，我使用它隐藏一个div，但它当前不起作用，我似乎不明白为什么。

Java 脚本:

<script type="text/javascript">
    var $answers = $("#answers");
    $("#Type").on("change", function() {
          if ($(this).val() === "click") {
            $answers.hide();
          } else {
            $answers.show();
          }
    })
</script>

这部分的作用是:

Type:
<select name="Type" id="Type">
    <option value="choice">Multiple choice</option>
    <option value="image">Image/Video</option>
    <option value="click">Click Image</option>
</select><br>
<div id="answers">
    Correct Answer:<input type="text" name="answer"><br>
    Wrong Answer 1:<input type="text" name="wrong1"><br>
    Wrong Answer 2:<input type="text" name="wrong2"><br>
    Wrong Answer 3:<input type="text" name="wrong3"><br>
</div>

PHP 页面的这一部分:

<?php 
include "connect.php"; ?>
<!DOCTYPE HTML>
<html dir="ltr" lang="en-US">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/_style.css" />
    <link rel="stylesheet" type="text/css" href="../css/_mobile.css" />
    <link rel="stylesheet" type="text/css" href="../css/primary-blue.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <script type="text/javascript">
        $(function () {
            $('button#showcompanys').on('click', function () {
                $('#companys').toggle("show");;
            });
        });
    </script>
    <script type="text/javascript">
        $(function () {
            $('button#showquestions').on('click', function () {
                $('#questions').toggle("show");;
            });
        });
    </script>
    <script type="text/javascript">
        $(function () {
            $('button#btnaddcompany').on('click', function () {
                $('#addcompany').toggle("show");;
            });
        });
    </script>
    <script type="text/javascript">
        $(function () {
            $('button#btnaddquestion').on('click', function () {
                $('#addquestion').toggle("show");;
            });
        });
    </script>
    <script type="text/javascript">
        var $answers = $("#answers");
        $("#Type").on("change", function () {
            if ($(this).val() === "click") {
                $answers.hide();
            } else {
                $answers.show();
            }
        })
    </script>
    <!--[if lt IE 9]>
      <link rel="stylesheet" href="../css/IE.css" />
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
    <!--[if lte IE 8]>
      <script type="text/javascript" src="../js/IE.js"></script>
      <![endif]-->
</head>
<?php include "../header.php"; ?>

<button id="showcompanys" onclick="">Show/Edit Companies</button>

<button id="btnaddcompany" onclick="">Add New Company</button>
<div id="addcompany" style="display:none"><br><br><br>
    <form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post">
        Company Name: <input type="text" name="companyname"><br>
        E-mail: <input type="email" name="email"><br>
        Number of Drivers: <input type="number" name="numdrivers"><br>
        Contact Name: <input type="text" name="contactname"><br>
        Address: <input type="text" name="address"><br>
        Phone Number: <input type="tel" name="phonenumber"><br>
        Insurance:<input type="radio" name="insurance" value="yes">Yes
        <input type="radio" name="insurance" value="no" checked>No<br>
        Number of Tests: <input type="number" name="numberoftests"><br>
        Password: <input type="password" name="password"><br>
        Notes: <input type="text" name="notes"><br>
        <input type="submit" name="addcompany" value="Create Company">
    </form>
</div>

<button id="showquestions" onclick="">Show/Edit Questions</button>

<button id="btnaddquestion" onclick="">Add New Question</button>
<div id="addquestion" style="display:none"><br><br><br>
    <form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post" enctype="multipart/form-data">
        Question: <input type="text" name="question"><br>
        Category: <select name="category">
            <option value="hazardawareness">Hazard Awareness</option>
            <option value="observation">Observation</option>
            <option value="insurance">Insurance</option>
            <option value="attitude">Attitude</option>
            <option value="knowledge">Gen. Knowledge</option>
        </select><br>
        Type:<select name="Type" id="Type">
            <option value="choice">Multiple choice</option>
            <option value="image">Image/Video</option>
            <option value="click">Click Image</option>
        </select><br>
        <div id="answers">
            Correct Answer:<input type="text" name="answer"><br>
            Wrong Answer 1:<input type="text" name="wrong1"><br>
            Wrong Answer 2:<input type="text" name="wrong2"><br>
            Wrong Answer 3:<input type="text" name="wrong3"><br>
        </div>
        Question Description:<input type="text" name="description"><br>
        Correct Answer Explanation:<input type="text" name="explanation"><br>
        Image/Video:<input type="file" name="fileToUpload" id="fileToUpload"><br>
        Explanation Image:<input type="file" name="explanationfileToUpload" id="explanationfileToUpload"><br>
        Hazardous?:<input type="radio" name="hazardous" value="yes">Yes
        <input type="radio" name="hazardous" value="no" checked>No<br>
        Vehicles: <input type="checkbox" name="vehicle[]" value="car">Car <input type="checkbox" name="vehicle[]"
            value="van">Van <input type="checkbox" name="vehicle[]" value="lgv">LGV <input type="checkbox"
            name="vehicle[]" value="hgv">HGV <input type="checkbox" name="vehicle[]" value="bus">Bus<br>
        <input type="submit" name="addquestion" value="Create Question">
    </form>
</div>



<br><br><br>
<div id="companys" style="display:none">
    <?php 
    $companyssql="SELECT * FROM Companys";
    $companysresult=mysqli_query($conn, $companyssql);
    echo mysqli_error($conn);

    echo "<table border='1' width='100%'>
    <tr>
    <th>Company Name</th>
    <th>Email</th>
    <th>Driver Count</th>
    <th>Contact Name</th>
    <th>Address</th>
    <th>Phone Number</th>
    <th>Insurance</th>
    <th>Number of Tests</th>
    <th>Notes</th>
    <th></th>
    <th></th>
    </tr>";

    while($row = mysqli_fetch_array($companysresult))
    {
        echo "<tr>";
        echo "<td>" . $row['CompanyName'] . "</td>";
        echo "<td>" . $row['Email'] . "</td>";
        echo "<td>" . $row['DriverCount'] . "</td>";
        echo "<td>" . $row['ContactName'] . "</td>";
        echo "<td>" . $row['Address'] . "</td>";
        echo "<td>" . $row['PhoneNumber'] . "</td>";
        if ($row['insurance'] == 'yes'){
            echo "<td>YES</td>";
        }else{
            echo "<td>NO</td>";
        }
        echo "<td>" . $row['NumberOfTests'] . "</td>";      
        echo "<td>" . $row['Notes'] . "</td>";
        echo "<td> <form action=" . $_SERVER["PHP_SELF"] . " method='post'><input type='hidden' name='company' value=" . $row['CompanyName'] . "> <input type='submit' name='editcompany' value='Edit'> </form></td>";
        echo "<td> <form action=" . $_SERVER["PHP_SELF"] . " method='post'><input type='hidden' name='company' value=" . $row['CompanyName'] . "> <input type='submit' name='deletecompany' value='Delete'> </form></td>";
        echo "</tr>";
    }
    echo "</table>";
    ?>
    <button id="btnaddcompany" onclick="">Add New Company</button>
    <div id="addcompany" style="display:none">
        <form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post">
            Company Name: <input type="text" name="companyname"><br>
            E-mail: <input type="email" name="email"><br>
            Number of Drivers: <input type="number" name="numdrivers"><br>
            Contact Name: <input type="text" name="contactname"><br>
            Address: <input type="text" name="address"><br>
            Phone Number: <input type="tel" name="phonenumber"><br>
            Insurance:<input type="radio" name="insurance" value="yes">Yes
            <input type="radio" name="insurance" value="no" checked>No<br>
            Number of Tests: <input type="number" name="numberoftests"><br>
            Number of Recruitment Accounts: <input type="number" name="numberofrecruit"><br>
            Password: <input type="password" name="password"><br>
            Notes: <input type="text" name="notes"><br>
            <input type="submit" name="addcompany" value="Create Company">
        </form>
    </div>
</div>

<div id="questions" style="display:none">
    <?php 
    $questionssql="SELECT * FROM Questions";
    if ($_GET['sort'] == 'Category')
    {
        $questionssql .= " ORDER BY Category";
    }
    elseif ($_GET['sort'] == 'Type')
    {
        $questionssql .= " ORDER BY Type";
    }
    $questionresult=mysqli_query($conn, $questionssql);
    echo mysqli_error($conn);

    echo "<table border='1' width='100%'>
    <tr>
    <th>Question</th>
    <th><a href='?sort=Category'>Category</a></th>
    <th><a href='?sort=Type'>Type</a></th>
    <th>Correct Answer</th>
    <th>Image</th>
    <th>Hazardous</th>
    <th>Vehicles</th>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
    </tr>";

    while($row = mysqli_fetch_array($questionresult))
    {
        echo "<tr>";
        echo "<td>" . $row['Question'] . "</td>";
        echo "<td>" . $row['Category'] . "</td>";
        echo "<td>" . $row['Type'] . "</td>";
        echo "<td>" . $row['CorrectAnswer'] . "</td>";
        echo "<td><IMG HEIGHT=100 WIDTH=100 SRC='" . $row['ImageURL'] . "'></td>";
        if ($row['Hazardous'] == 'yes'){
            echo "<td>YES</td>";
        }else{
            echo "<td>NO</td>";
        }       
        $questionvehicles = "SELECT * FROM QuestionVehicles WHERE QuestionID = " . $row['ID'];
            $vehiclesresults = mysqli_query($conn, $questionvehicles);
        echo "<td>";
            while($vrow = mysqli_fetch_array($vehiclesresults)){
            echo $vrow['VehicleCat'] . " ";
        }
        echo "</td>";
        echo "<td> <form action=" . $_SERVER["PHP_SELF"] . " method='post'><input type='hidden' name='question' value=" . $row['ID'] . "> <input type='submit' name='editquestion' value='Edit'> </form></td>";
        echo "<td> <form action=" . $_SERVER["PHP_SELF"] . " method='post'><input type='hidden' name='question' value=" . $row['ID'] . "> <input type='submit' name='deletequestion' value='Delete'> </form></td>";
        echo "<td> <form action='preview.php' method='post' target='_blank'><input type='hidden' name='question' value=" . $row['ID'] . "> <input type='submit' name='Preview' value='Preview'> </form></td>";
        echo "<td> <form action=" . $_SERVER["PHP_SELF"] . " method='post'><input type='hidden' name='question' value=" . $row['ID'] . "> <input type='submit' name='questionreport' value='View Reports'> </form></td>";
        echo "</tr>";
    }
    echo "</table>";
    ?>

</div>
<?php include "../footer.php"; ?>

最佳答案

您需要将其包装到$(document).ready中或将其移动到正文末尾附近

<script type="text/javascript">
  $(function() { // this is the equivalent of $(document).ready(function(){
    var $answers = $("#answers");
    $("#Type").on("change", function() {
      if ($(this).val() === "click") {
        $answers.hide();
      } else {
        $answers.show();
      }
    });
  });
</script>

原因是，当脚本执行时，它会查找元素，但元素尚未在 DOM 中，因此无法找到它们。您需要告诉它等待直到准备好，或者在所有元素准备好后将脚本移到最后。

关于javascript - 如何在选项选择上隐藏 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28108376/

文章推荐： javascript - 在 HTML 中插入图像而不移动文本

文章推荐： javascript - 如何在 Angular JS 中执行 switch 或 else/if 语句？

文章推荐： javascript - 此页第 0 行字符 0 代码 0 上的脚本发生错误

文章推荐： wpf - 数据表绑定(bind)到表单不起作用

jquery - 隐藏、显示、隐藏/显示按钮
代码如下: http://jsfiddle.net/t2nite/KCY8g/ 我正在使用 jquery 创建这些隐藏框。每个框都有一些文本和一个“显示”和“隐藏”按钮。我正在尝试创建一个“显示/隐
jquery - onclick div 隐藏，setTimeout div 隐藏
我正在尝试做某事。如果单击一个添加 #add-conferance 然后菜单将显示.add-contact。当点击隐藏然后它显示隐藏。我也将 setTimeout 设置为 7sec，但我希望当我的鼠标
javascript - 如何仅在第一页(div)隐藏 "previous"按钮并在最后一页(div)隐藏 "next button"
我有一个多步骤(多页？)表单，只要用户按下“下一步”或“上一步”按钮，表单字段就会通过 div 显示和隐藏。我只想禁用第一个 div (div id="page1"class="pageform")
asp.net - 现有 ASP.NET 4 解决方案中的高效 URL 屏蔽/隐藏/隐藏
我有一个使用 IIS 6 和 7 的当前系统，用 ASP.NET 和 .NET 4 中的 C# 编写。 My purpose is to hide the url completely (as per
jquery - 如果 'X' div 可见，则 'Y' div 隐藏。如果 'X' div 隐藏，则 'Y' div 可见
我正在建立一个网站，并有一个幻灯片。幻灯片有标题和索引，覆盖整个页面。当覆盖被激活时，标题需要消失。当覆盖层被停用时，通过单击退出按钮、缩略图链接或菜单链接，字幕必须返回。这就是我目前所拥有的
Jquery显示/隐藏
我正在尝试为显示/隐藏功能制作简单的 jquery 代码。但我仍然做错了什么。 $(document).ready(function(){ $('.arrow').click(function
Android自定义对话框在菜单按下时显示/隐藏
我有一个自定义对话框并使用它来代替 optionMenu。所以我希望 myDialog 表现得像菜单，即在按下菜单时显示/隐藏。我尝试了很多变体，但结果相同: 因为我为 myDialog 设置了一个
Android动态移除tabBar(隐藏)
在我的项目中，我通过 ViewPager 创建我的 tabBar，如下所示: MainActivity.java mViewPager = (ViewPager) findViewById(R.id.
excel - 隐藏/取消隐藏excel中的特定行时要更改的单元格值？
我目前正在使用一个 Excel 表，我将第 1-17 行分组并在单元格 B18 中写入了一个单元格值。我想知道当我在展开/折叠行时单击 +/- 符号时是否有办法更改 B18 中的值。例如:我希望 B
excel - 隐藏/取消隐藏特定组
我想创建一个按钮来使用 VBA 隐藏和取消隐藏特定组。我拥有的代码将隐藏或取消隐藏指定级别中的所有组: Sub Macro1() ActiveSheet.Outline.ShowLevels RowL
excel - 隐藏/取消隐藏最后写入的行
我是 VBA 新手。我想隐藏从任何行到工作表末尾的所有行。我遇到的问题是我不知道如何编程以隐藏最后写入的行。我使用下一个函数知道最后写入的单元格，但我不知道在哪里放置隐藏函数。 last = Ra
acumatica - 隐藏/禁用基于输入字段的其他字段
我想根据另一个字段的条件在 UI 上隐藏或更新一个字段。例如，如果我有一个名为 Color 的字段: [PXUIField(DisplayName="Color")] [PXStringList("
GCC 隐藏/鲜为人知的功能
这是我尝试开始收集通常不会遇到的 GCC 特殊功能。这是@jlebedev 在另一个问题中提到g++的“有效C++”选项之后， -Weffc++ This option warns about C++
Flutter ProgressDialog 隐藏
我开发了一个 Flutter 应用程序，我使用了 ProgressDialog小部件 ( progress_dialog: ^1.2.0 )。首先，我展示了 ProgressDialog小部件和一些代
android - 隐藏/显示没有动画的状态栏
我需要在 API 17+ 的同一个 Activity(Fragment) 中显示/隐藏状态栏。假设一个按钮将隐藏它，另一个按钮将显示它: 节目: getActivity().getWindow().s
angular - 是否可以通过编程方式控制清晰度下拉列表的显示/隐藏？
是否可以通过组件的 ts 代码以编程方式控制下拉列表的显示/隐藏(使用 Angular2 清楚)- https://vmware.github.io/clarity/documentation/dro
jquery - NiceScroll显示/隐藏
我想根据 if 函数的结果隐藏/显示 NiceScroll。在我的html中有三个部分，从左到右逐一滚动。我的脚本如下: var section2 = $('#section2').offset(
jquery - 单击外部 > 隐藏()
我有这个 jquery 代码: $(document).ready(function(){ //global vars var searchBoxes = $(".box"); var searchB
Jquery基于变量显示/隐藏(不是切换)
这个问题已经有答案了: Does something like jQuery.toggle(boolean) exist? (5 个回答) 已关闭 6 年前。在 jQuery 中(我当前使用的是 1
jQuery 隐藏 selectMenu？
我在这样的选择标签上使用 jQuery 的 selectMenu。 $('#ddlReport').selectmenu() 在某些情况下我想隐藏它，但我不知道如何隐藏。这不起作用: $('#ddl

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何在选项选择上隐藏 div