[英]want to display and hide content based on selection of drop down list
I know its to simple but I am new to this. 我知道这很简单,但是我对此并不陌生。
I am trying to display a input type date field on selection of "sold" from drop down list. 我正在尝试从下拉列表中选择“出售”以显示输入类型日期字段。
I have tried few thing but still its not working. 我尝试了几件事,但仍然无法正常工作。 So here is my code. 这是我的代码。
$('#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>
The issue is because the value
of the option in the select is mssql
, not Sold
- that's the text of the option. 问题是因为select中选项的value
是mssql
,而不是Sold
这是选项的文本。
Also, make sure that you execute the jQuery logic in a document.ready handler when including it in the <head>
of the document, and you can simplify the logic by using toggle()
instead. 另外,确保将jQuery逻辑包含在文档的<head>
中时在document.ready处理程序中执行jQuery逻辑,并且可以通过使用toggle()
来简化逻辑。 Try this: 尝试这个:
$(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>
Please try it it's work fine. 请尝试正常运行。
<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>
You have passed wrong value in sold option, check updated snippet below: 您在卖出期权中传递了错误的值,请检查以下更新的代码段:
$('#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.