如何基于选择值显示表单输入字段？ [英] How to show form input fields based on select value?
问题描述
我知道这很简单，我需要在Google中搜索。我尽力而为，找不到更好的解决方案。我有一个表单域，它需要一些输入和一个选择域，它有一些值。它还具有其他价值。
我想要的是：
如果用户选择其他选项，则指定一个文本字段应显示'其他'。当用户选择另一个选项（比'其他'），我想再次隐藏它。我如何使用JQuery执行该操作？
这是我的JSP代码
< label for = db>选择类型< / label>
< option>选择数据库类型< / option>
< option value =oracle> Oracle<选项>
< option value =mssql> MS SQL< / option>
< option value =mysql> MySQL< / option>
< option value = other>其他< / option>
< / select>
< div id =otherTypestyle =display：none;>
< ; label for =指定>指定< / label>
< input type =textname =指定placeholder =指定数据库类型/>
< / div>
现在我只想显示DIV标记**（id =otherType）**用户选择Other
我想尝试JQuery这是我试过的代码
$ b $ $ $ $ $ code $< 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'）.ch ange（function（）{
selection = $（'this'）。value（）;
switch（选择）
{
case'other'：
$（'＃otherType'）。show（）;
休息;
case'default'：
$（'＃otherType'）。hide（）;
休息;
}
}）;
< / script>
但我无法得到这个结果。我该怎么办？感谢您的代码中有几个问题：
- 缺少对select元素id的公开引用，因此：
< select name =dbTypeid = dbType>
应该是< select name =dbTypeid =dbType>
-
$（'this'）应该是$（this）：没有必要引用paranthesis中的引号。 >当你想检索一个选项的值时，使用.val（）而不是.value（）当你初始化选择时， var在它之前，除非你已经在函数的开始处完成了它。
试试这个： （$（$））$（b
$ $ $ $ $'$ $ $ $' .val（）===other）{
$（＃otherType）。show（）
}
else {
$（＃ot herType）。hide（）
}
}）;
更新用于切换：
$ b $ （''change'，function（）{var selection = $（this）.val（）;
$ $ $ $ $''$ db $' ;
switch（选择）{
caseother：
$（＃otherType）。show（）
break;
default：
$（＃otherType）。hide（）
}
}）;
UPDATE 带有jQuery和jQuery-UI链接：
< script src =// ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js >< /脚本>
< script src =// ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js\"></script>
I know this is simple, and I need to search in 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?
This is my JSP 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="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. I want to try 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:
- you are missing an open quote on the id of the select element, so:
<select name="dbType" id=dbType">
should be <select name="dbType" id="dbType">
$('this')should be$(this): there is no need for the quotes inside the paranthesis.use .val() instead of .value() when you want to retrieve the value of an option
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()
}
});
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:
<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>
这篇关于如何基于选择值显示表单输入字段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
