时间戳

首页 > 解决方案 > 如何处理具有隐藏和显示 div 的多个下拉菜单的父/子 div 问题？

javascript - 如何处理具有隐藏和显示 div 的多个下拉菜单的父/子 div 问题？

问题描述

这是问题：

<p>Choose Type of Request:</p>
<select class="typeOfRequest">
    <option> Choose Type of Request</option>
    <option value="fundscenter">Funds Center Request</option>
    <option value="onlinestore">New Online Store and/or POS</option>
</select>

选择“在线商店”时，会弹出此下拉菜单：

<p>Do you need equipment?</p>
<div class="onlinestore box">
<select id="equipmentQuestion" onchange="showDiv('hidden_div', this)"> 
   <option selected>Select</option>
   <option value="Yes">Yes</option>
   <option value="No">No</option>
</select>

****这就是问题所在：当在上面的下拉列表中选择“是”时，我需要弹出这个 div：

<div id="hidden_div">
<tr> 
<td>Equipment Needed:</td>
<td>

<input type="checkbox" id="ipad_checkbox"> iPad
  <br>
<div id="ipadqty_div">  <!-- THIS DIV POPS UP WHEN CHECKBOX IS CHECKED -->
  Qty: <input type="number" id="ipadqty" class="numberBoxes" size="35" 
min="0"> </input>
</div>

<br>  

<input type="checkbox" id="cct_checkbox"> Credit Card Terminal 
<div id="cctqty_div">  <!-- THIS DIV POPS UP WHEN CHECKBOX IS CHECKED -->
 Qty: <input type="number" id="cctqty" class="numberBoxes" size="35" min="0"> </input>
  <br>
 </div>

然而，由于某种原因，当我选择“是”时，“hidden_​​div”没有出现。

我有一种感觉，由于父/子 div 的情况，它不起作用，因为我已经在互联网上搜索了解决方案，所有这些似乎都可以自己工作，但不是在我的应用程序中。但是，我不确定，所以我希望有人能引导我朝着正确的方向前进：

目前，我正在使用 javascript，但如果有更好的方法，我也可以。

这是我的 HTML 和 JS 的完整代码：

https://jsfiddle.net/audgepodge626/6qomenpw/2/

标签： javascripthtml

解决方案

问题出在您的标记上，当div用作table. 所以我只是重新排列了一些无效的标记以使其工作。

/* This function is for the yes/no dropdown for the equipment question */

function showDiv(divId, element) {
  document.getElementById(divId).style.display = element.value == "Yes" ? 'block' : 'none';
}



/* This function allows for the different types of requests to appear with select dropdown class "typeOfRequest*/

$(document).ready(function() {

  $("select.typeOfRequest").change(function() {

    $(this).find("option:selected").each(function() {

      if ($(this).attr("value") == "fundscenter") {
        $(".box").not(".fundscenter").hide();
        $(".fundscenter").show();
      } else if ($(this).attr("value") == "onlinestore") {
        $(".box").not(".onlinestore").hide();
        $(".onlinestore").show();
      } else {
        $(".box").hide();

      }
    });
  }).change();
});





/* This section deals with the checkboxes next to "Equipment Needed"*/

$(function() {
  $("#ipadqty_div").hide()
  $("#ipad_checkbox").click(function() {
    if ($(this).is(":checked")) {
      $("#ipadqty_div").show();
    } else {
      $("#ipadqty_div").hide();
    }
  });
}).change();


$(function() {
  $("#cctqty_div").hide();
  $("#cct_checkbox").click(function() {
    if ($(this).is(":checked")) {
      $("#cctqty_div").show();
    } else {
      $("#cctqty_div").hide();
    }
  });
}).change();
<html lang="en">

<head>




  <link href="style.css" rel="stylesheet">

  <!--icon-->
  <link rel="icon" type="" href="../images/favicon.png">

  <!-- Bootstrap Core CSS -->
  <link href="../css/bootstrap.css" rel="stylesheet">

  <!-- MetisMenu CSS -->
  <link href="../css/metisMenu.min.css" rel="stylesheet">

  <!-- Custom CSS -->
  <link href="../css/sb-admin-2.css" rel="stylesheet">

  <!-- Custom Fonts -->
  <link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css">

  <!--JQuery UI CSS Files-->
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

  <!--Fund Auto Complete CSS>
    <link href="./vendor/bootstrap/css/auto.css"-->

  <!--Custom CSS-->
  <link href="../css/scustom.css" rel="stylesheet">

  <!--Hide and show divs-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



  <!--This script is to Show/hide divs based on dropdown selection-->
  <script src="dropdown.js"></script>


</head>

<body>





  <!--HEADINGS, general page body-->
  <div id="page-wrapper">
    <div class="row">
      <div class="col-lg-12">
        <h1 class="page-header" style="float:left">Accounting Services' Request</h1>
      </div>
      <!-- /.col-lg-12 -->
    </div>


    <!-- /.row -->

    <div class="row">

      <div class="col-lg-12">

        <div class="panel panel-default">

          <div class="panel-heading">
            <span style="text-align:center;">
                            Create New Request<!--for subheading, you type here-->

</span>
          </div>
        </div><br>

        <form name="form1" action="nothing.php" method="GET" enctype="multipart/form-data">
          <div class="general">

            <strong style="float:left">Requester Information</strong>

            <table style="float:left">


              <select class="typeOfRequest">
                <option> Choose Type of Request</option>
                <option value="fundscenter">Funds Center Request</option>
                <option value="onlinestore">New Online Store and/or POS</option>

              </select>


            </table>
          </div>





          <!--  ////////////////////////////// funds center request div //////////////////////////////////////////////// -->
          <div class="fundscenter box">
            Contents of fundscenter box
          </div>






          <div class="onlinestore box">

            <h1 style="float:left">New Online Store Request</h1>

            <table style="float:left">




              <tr>
                <td>Name of Store:</td>
                <td><input name="Requester_Name" size="30" value="<?php echo $row['FIRST_NAME'];?> <?php echo $row['LAST_NAME'];?>" required></td>
              </tr>
              <tr>
                <td>Logo:</td>
                <td><input type="file" name="Requester_Phone" size="10"></td>
              </tr>
              <tr>
                <td>Access to Reports?:</td>
                <td>
                  <select name="accesstoReports">
                    <option>Select</option>
                    <option value="Yes">Yes</option>
                    <option value="No">No</option>
                  </select>
                </td>
              </tr>





              <tr>

                <td>Would you like to recieve a notification email?:</td>
                <td>
                  <select class="typeOfRequest">
                    <option> Select </option>
                    <option value="Yes">Yes</option>
                    <option value="No">No</option>
                  </select>

                </td>
              </tr>


              <tr class="displayNotifEmail">
                <td>Notification Email Address:</td>
                <td><input name="Requester_Email" size="30"></td>
              </tr>



              <tr>
                <td>Contact Us Email:</td>
                <td><input readonly name="Requested_Date" size="15" value="<? echo $Created_Date; ?>"></td>
              </tr>


              <tr>
                <td>Fund Center:</td>
                <td><input id="datepicker" name="Requested_Needed" size="15" required>&nbsp;</td>
              </tr>


              <tr>
                <td>GL (Not required):</td>
                <td><input readonly name="Requested_Date" size="15" value="<? echo $Created_Date; ?>"></td>
              </tr>


              <tr>
                <td>Product excel template:<br>
                  <a href="">Template</a>
                </td>
                <td><input type="file" name="Requester_Phone" size="10"></td>
              </tr>


              <tr>
                <td>Product Images:</td>
                <td><input type="file" name="Requester_Phone" size="10"></td>
              </tr>


              <tr>
                <td>POS:</td>
                <td>
                  <select id="posSelect">
                    <option>Select</option>
                    <option value="1">Yes</option>
                    <option value="2">No</option>
                  </select>
                </td>
              </tr>


              <!-- ///////////////////////////////////////////////////////////////////////////////////////// -->
              <tr>
                <td>Do you need equipment?:</td>
                <td>
                  <select id="equipmentQuestion" name="form_select" onchange="showDiv('hidden_div', this)">
                    <option selected>Select</option>
                    <option value="Yes">Yes</option>
                    <option value="No">No</option>
                  </select>

              </tr>

              <tr id="hidden_div">
                <td>Equipment Needed:</td>
                <td>

                  <input type="checkbox" id="ipad_checkbox"> iPad
                  <br>
                  <div id="ipadqty_div">
                    Qty: <input type="number" id="ipadqty" class="numberBoxes" size="35" min="0" />
                  </div>

                  <br>

                  <input type="checkbox" id="cct_checkbox"> Credit Card Terminal
                  <div id="cctqty_div">
                    Qty: <input type="number" id="cctqty" class="numberBoxes" size="35" min="0" />
                    <br>
                  </div>

                </td>
              </tr>
              <!-- -->

              <!-- /////////////////////////////////////////////////////////////////////////////////////// -->


              <tr>
                <td>Additional Notes:</td>
                <td><textarea rows="4" cols="40"></textarea></td>
              </tr>




            </table>


          </div>

          <!--
<input type="submit"></input>
-->
        </form>


</body>

</html>

仅供参考： 标签可以包含以下子元素（并按此顺序）：（取自此处）

  1. 可选的标签
  2. 后跟零个或多个标签
  3. 后跟一个标签（可选）
  4. 后跟一个标签（可选）
  5. 后跟零个或多个标签或一个或多个标签
  6. 后跟可选标签（但总共只能有一个标签子标签）
  7. 可选地与一个或多个脚本支持元素（即标签或）混合

推荐阅读