javascript 在下拉选择中显示文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15229980/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show a textbox on drop down select
提问by Jt2ouan
I tried doing onchange and onclick event and I'm having trouble with both of them. When executing my code, Firebug tells me my showTextBox function is not defined.
我尝试做 onchange 和 onclick 事件，但我都遇到了问题。执行我的代码时，Firebug 告诉我我的 showTextBox 函数没有定义。
When the value 1 is selected for the State dropdown, I need to display the <div>which holds a textbox. I'm moved the onclick attribute in the option tags as well as tried onchange attribute and still get showTextBox() is not defined in Firebug.
当为 State 下拉列表选择值 1 时，我需要显示<div>包含文本框的 。我移动了选项标签中的 onclick 属性以及尝试过的 onchange 属性，但仍然在 Firebug 中没有定义 showTextBox() 。
<select id="AddrType" onclick="showTextBox();"
height="30px" style="width: 90px">
<option value="10"></option>
<option value="0">City</option>
<option value="1">State</option>
<option value="2">Zip</option>
</select>
<br />
<div id="stateText" style="visibility: hidden">
State <input type="text" id="STATE"/>
</div>
Here is the function that called when either the onclick or onchange events are triggered:
这是在触发 onclick 或 onchange 事件时调用的函数：
function showTextBox() {
console.log("in check Drop down");
if ($('#AddrType').val() == 'State') {
$('#stateText').style.visibility = 'visible';
}
console.log($('#AddrType').val());
Any help with this. I've Googled it, but I can't seem to find something that works. I can't use the document.getElementById()function.
任何帮助。我已经用谷歌搜索过了，但我似乎找不到有用的东西。我无法使用该document.getElementById()功能。
采纳答案by Manish Mishra
try this:
试试这个：
<script type='text/javascript'>
$(document).ready(function(){
$('#AddrType').change(function(){
if ($(this).val() == '1') {
$('#stateText').css({'display':'block'});
}
});
});
</script>
and update your select to this:
并将您的选择更新为：
<select id="AddrType" height="30px" style="width: 90px">
<option value="10"></option>
<option value="0">City</option>
<option value="1">State</option>
<option value="2">Zip</option>
</select>
also, this works perfectly fine.
此外，这工作得很好。
<select id="AddrType" onchange="showTextBox()" height="30px" style="width: 90px">
<option value="10"></option>
<option value="0">City</option>
<option value="1">State</option>
<option value="2">Zip</option>
</select>
and where showTextBox() is:
其中 showTextBox() 是：
function showTextBox(){
if ($('#AddrType').val() == '1') {
$('#stateText').css({'visibility':'visible'});
}
回答by haim770
Your val()is probably returning "1"instead of "State"you're checking against.
您val()可能正在返回，"1"而不是"State"您正在检查。
Not only on jQuery but also when you POST the form data to a server, the value of AddrTypewill be the valueattribute of the chosen optionelement ("City / State / Zip" in your case is just the 'caption' of the value).
不仅在 jQuery 上，而且当您将表单数据发布到服务器时， 的值AddrType将是value所选option元素的属性（在您的情况下，“城市/州/邮编”只是值的“标题”）。
