想要根据下拉列表的选择显示和隐藏内容
[英]want to display and hide content based on selection of drop down list
问题描述
我知道这很简单，但是我对此并不陌生。
我正在尝试从下拉列表中选择“出售”以显示输入类型日期字段。
我尝试了几件事，但仍然无法正常工作。 这是我的代码。
$('#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> <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>
3 个解决方案
解决方案1
1 2017-05-03 09:05:08
问题是因为select中选项的value是mssql ，而不是Sold这是选项的文本。
另外，确保将jQuery逻辑包含在文档的<head>中时在document.ready处理程序中执行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>
解决方案2
1 已采纳 2017-05-03 09:11:07
请尝试正常运行。
<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>
解决方案3
0 2017-05-03 09:05:17
您在卖出期权中传递了错误的值，请检查以下更新的代码段：
$('#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>
根据下拉列表显示/隐藏文本框
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.