[英]How to show form input fields based on select value?
I know this is simple, and I need to search in Google.我知道这很简单,我需要在 Google 中搜索。 I tried my best and I could not find a better solution.
我尽力了,但找不到更好的解决方案。 I have a form field, which takes some input and a select field, which has some values.
我有一个表单字段,它需要一些输入和一个选择字段,它有一些值。 It also has "Other" value.
它还具有“其他”值。
What I want is:我想要的是:
If the user selects the 'Other' option, a text field to specify that 'Other' should be displayed.如果用户选择“其他”选项,则应显示指定“其他”的文本字段。 When a user selects another option (than 'Other') I want to hide it again.
当用户选择另一个选项(而不是“其他”)时,我想再次隐藏它。 How can I perform that using JQuery?
如何使用 JQuery 执行该操作?
This is my JSP code这是我的 JSP 代码
<label for="db">Choose type</label>
<select name="dbType" id=dbType">
<option>Choose Database Type</option>
<option value="oracle">Oracle</option>
<option value="mssql">MS SQL</option>
<option value="mysql">MySQL</option>
<option value="other">Other</option>
</select>
<div id="otherType" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Databse Type"/>
</div>
Now I want to show the DIV tag**(id="otherType")** only when the user selects Other.现在我只想在用户选择其他时显示 DIV 标签**(id="otherType")**。 I want to try JQuery.
我想尝试 JQuery。 This is the code I tried
这是我试过的代码
<script type="text/javascript"
src="jquery-ui-1.10.0/tests/jquery-1.9.0.js"></script>
<script src="jquery-ui-1.10.0/ui/jquery-ui.js"></script>
<script>
$('#dbType').change(function(){
selection = $('this').value();
switch(selection)
{
case 'other':
$('#otherType').show();
break;
case 'default':
$('#otherType').hide();
break;
}
});
</script>
But I am not able to get this.但我无法得到这个。 What should I do?
我应该怎么办? Thanks
谢谢
You have a few issues with your code:您的代码有几个问题:
<select name="dbType" id=dbType">
<select name="dbType" id=dbType">
should be <select name="dbType" id="dbType">
应该是
<select name="dbType" id="dbType">
$('this')
should be $(this)
: there is no need for the quotes inside the paranthesis. $('this')
应该是$(this)
:括号内不需要引号。
use .val() instead of .value() when you want to retrieve the value of an option当您想要检索选项的值时,请使用 .val() 而不是 .value()
when u initialize "selection" do it with a var in front of it, unless you already have done it at the beggining of the function当你初始化“选择”时,在它前面加上一个变量,除非你已经在函数开始时完成了
try this:试试这个:
$('#dbType').on('change',function(){
if( $(this).val()==="other"){
$("#otherType").show()
}
else{
$("#otherType").hide()
}
});
http://jsfiddle.net/ks6cv/ http://jsfiddle.net/ks6cv/
UPDATE for use with switch:更新与开关一起使用:
$('#dbType').on('change',function(){
var selection = $(this).val();
switch(selection){
case "other":
$("#otherType").show()
break;
default:
$("#otherType").hide()
}
});
UPDATE with links for jQuery and jQuery-UI:更新jQuery 和 jQuery-UI 的链接:
<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>
Demo on JSFiddle在 JSFiddle 上演示
$(document).ready(function () {
toggleFields(); // call this first so we start out with the correct visibility depending on the selected form values
// this will call our toggleFields function every time the selection value of our other field changes
$("#dbType").change(function () {
toggleFields();
});
});
// this toggles the visibility of other server
function toggleFields() {
if ($("#dbType").val() === "other")
$("#otherServer").show();
else
$("#otherServer").hide();
}
HTML: HTML:
<p>Choose type</p>
<p>Server:
<select id="dbType" name="dbType">
<option>Choose Database Type</option>
<option value="oracle">Oracle</option>
<option value="mssql">MS SQL</option>
<option value="mysql">MySQL</option>
<option value="other">Other</option>
</select>
</p>
<div id="otherServer">
<p>Server:
<input type="text" name="server_name" />
</p>
<p>Port:
<input type="text" name="port_no" />
</p>
</div>
<p align="center">
<input type="submit" value="Submit!" />
</p>
I got its answer.我得到了它的答案。 Here is my code
这是我的代码
<label for="db">Choose type</label>
<select name="dbType" id=dbType">
<option>Choose Database Type</option>
<option value="oracle">Oracle</option>
<option value="mssql">MS SQL</option>
<option value="mysql">MySQL</option>
<option value="other">Other</option>
</select>
<div id="other" class="selectDBType" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Databse Type"/>
</div>
And my script is我的脚本是
$(function() {
$('#dbType').change(function() {
$('.selectDBType').slideUp("slow");
$('#' + $(this).val()).slideDown("slow");
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function myfun(){
$(document).ready(function(){
$("#select").click(
function(){
var data=$("#select").val();
$("#disp").val(data);
});
});
}
</script>
</head>
<body>
<p>id <input type="text" name="user" id="disp"></p>
<select id="select" onclick="myfun()">
<option name="1"value="1">first</option>
<option name="2"value="2">second</option>
</select>
</body>
</html>
$('#dbType').change(function(){
var selection = $(this).val();
if(selection == 'other')
{
$('#otherType').show();
}
else
{
$('#otherType').hide();
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.