Question

<html>
   <body>
   <script type ="text/javascript">
      $(function(){
         $("#dropdown").change(function(){
            if ($("#dropdown").val()=="select"){
               $("#select").show();
               $("#insert").hide();
            }else {
               $("#select").hide();
               $("#insert").show();

            }

         });
      });
   </script>
   <select id="dropdown">
      <option value="select">Select</option>
      <option value="insert">Insert</option>
   </select>
   <hr />
   <div id="select">
      Customername<br>
      <input type="text" name="Customername" id="select">
      <br>
      StartDate<br>
      <input type="date" name="Startdate" id="select">
      <br>
      Enddate
      <br>
      <input type="date" name="EndDate" id="select">
      <br>
   </div>
   <div id="insert">
      <br>
      FromDate<br>
      <input type="date" name="Startdate" id="insert">
      <br>
      Todate
      <br>
      <input type="date" name="EndDate" id="insert">
      <br>
   </div>
   </body>
</html>

当我点击“选择”时，我需要获取Customername，StartDatedate和Enddate .Fromdate，Todate，当我点击insert.I已经尝试过，但它显示所有名称而不隐藏我需要添加的内容。可以请帮忙，因为我不熟悉HTML和jquery

Answer 1

如果您的意思是想要查看3个第一个字段或最后2个字段，则只需在文档中触发change()的{{1}}事件准备就绪。

将此添加到jQuery的末尾：

select

由于隐藏或显示字段的代码仅在select的值更改时执行，因此您可以在文档准备就绪时模拟更改，并且会认为您选择了第一个可用选项。

演示： https://jsfiddle.net/Paf_Sebastien/hsjo1qcL/

Answer 2

您只需将display:none添加到insert div，因为select中的默认选项将选择

<div id="insert" style="display:none">
      <br>
      FromDate<br>
      <input type="date" name="Startdate" id="insert">
      <br>
      Todate
      <br>
      <input type="date" name="EndDate" id="insert">
      <br>
</div>

<强> DEMO HERE

休息一切都很好。

<强>更新

从评论中我发现您收到$ is undefined错误消息后，您需要先将jquery.js添加到页面顶部，它可以在<head></head>内添加以下行

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>‌

使用下拉列表显示选项

2 个答案: