Question

我知道它很简单，但我是新手。

我正在尝试在选择＆＃34;出售＆＃34;时显示输入类型日期字段。从下拉列表中。

我尝试过一些东西，但仍然无法正常工作。所以这是我的代码。

＆＃13;

$('#dbType').change(function() {
  selection = $(this).val();
  switch (selection) {
    case 'Sold':
      $('#otherType').show();
      break;
    default:
      $('#otherType').hide();
      break;
  }
});

＆＃13;

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>


<form action="intra_day_trade_insert.php" method="POST">
  Share Puchased Of Company <input type="text" name="Share_Puchased_Of_Company">
  <br><br><br> Price For One Share <input type="number" name="Price_For_One_Share">
  <br><br><br> Quantity <input type="number" name="Quantity">
  <br><br><br> Date Of Purchase <input type="date" name="Date_Of_Purchase">
  <br><br><br>
  <label for="db">Status</label>
  <select name="dbType" id="dbType">
    			   <option>Choose Status</option>
    			   <option value="oracle">Owned</option>
    			   <option value="mssql">Sold</option>
    			</select>
  <div id="otherType" style="display:none;">
    Sold on date <input type="date" name="Sold_on_date">
  </div>
  <br><br><br>
  <input type="submit" name="Add_To_Balance_Sheet" value="Add To Balance Sheet">
</form>

＆＃13;

Answer 1

问题是因为选项中的value选项是mssql，而不是Sold - 这是选项的文字。

此外，确保在document.ready处理程序中将jQuery逻辑包含在文档的<head>中时执行jQuery逻辑，并且可以使用toggle()来简化逻辑。试试这个：

$(function() {
  $('#dbType').change(function() {
    $('#otherType').toggle($(this).val() == 'mssql');
  });
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>


<form action="intra_day_trade_insert.php" method="POST">
  Share Puchased Of Company 
  <input type="text" name="Share_Puchased_Of_Company"><br><br><br> 
  Price For One Share <input type="number" name="Price_For_One_Share"><br><br><br> 
  Quantity <input type="number" name="Quantity"><br><br><br> 
  Date Of Purchase <input type="date" name="Date_Of_Purchase"><br><br><br>

  <label for="db">Status</label>
  <select name="dbType" id="dbType">
    <option>Choose Status</option>
    <option value="oracle">Owned</option>
    <option value="mssql">Sold</option>
  </select>

  <div id="otherType" style="display:none;">
    Sold on date <input type="date" name="Sold_on_date">
  </div><br><br><br>

  <input type="submit" name="Add_To_Balance_Sheet" value="Add To Balance Sheet">
</form>

Answer 2

请尝试一下它的工作正常。

    <head>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>‌

    <script>    
$('document').ready(function(){
    $('#dbType').change(function(){
   var selection = $(this).val(); 

   switch(selection)
   { 
       case 'mssql':
           $('#otherType').show();
           break;
       default:
           $('#otherType').hide();
           break;
   }
});
});
    </script>

    </head>

        <body>

            <form action = "intra_day_trade_insert.php" method = "POST">

            Share Puchased Of Company <input type="text" name = "Share_Puchased_Of_Company">
            <br><br><br>

            Price For One Share <input type = "number" name = "Price_For_One_Share">
            <br><br><br>

            Quantity <input type = "number" name = "Quantity">
            <br><br><br>

            Date Of Purchase <input type = "date" name = "Date_Of_Purchase">
            <br><br><br>

            <label for="db">Status</label>

            <select name="dbType" id="dbType">
               <option>Choose Status</option>
               <option value="oracle">Owned</option>
               <option value="mssql">Sold</option>
            </select>

            <div id="otherType" style="display:none;">

            Sold on date <input type = "date" name = "Sold_on_date">

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


            <input type = "submit" name = "Add_To_Balance_Sheet" value = "Add To Balance Sheet">

            </form>



        </body>

</html>

Answer 3

您在已售出选项中输入了错误的值，请查看以下更新的代码段：

$('#dbType').change(function(){
   selection = $(this).val();  
   switch(selection)
   { 
       case 'Sold':
           $('#otherType').show();
           break;
       default:
           $('#otherType').hide();
           break;
   }
});

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
     <form action = "intra_day_trade_insert.php" method = "POST">

            Share Puchased Of Company <input type="text" name = "Share_Puchased_Of_Company">
            <br><br><br>

            Price For One Share <input type = "number" name = "Price_For_One_Share">
            <br><br><br>

            Quantity <input type = "number" name = "Quantity">
            <br><br><br>

            Date Of Purchase <input type = "date" name = "Date_Of_Purchase">
            <br><br><br>

            <label for="db">Status</label>

            <select name="dbType" id="dbType">
               <option>Choose Status</option>
               <option value="Owned">Owned</option>
               <option value="Sold">Sold</option>
            </select>

            <div id="otherType" style="display:none;">

            Sold on date <input type = "date" name = "Sold_on_date">

            </div>
            <br><br><br>


            <input type = "submit" name = "Add_To_Balance_Sheet" value = "Add To Balance Sheet">

            </form>

想要根据下拉列表的选择显示和隐藏内容

3 个答案: