Javascript：如果选择了下拉选项，则显示文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7772906/
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
Javascript: Making a textbox display if a dropdown option is selected
提问by Ray
Here's a screenshot of what I'm trying to accomplish:
这是我正在尝试完成的屏幕截图：
Basically, if the user chooses "SFTP", a textbox should be displayed.
基本上，如果用户选择“SFTP”，则应显示一个文本框。
Here's the code I have:
这是我的代码：
<strong class="heading">Image Hosting</strong>
<div id="imagehosting">
<form name="test">
Does the client require our company to host their images? <br />
<em>If you select this option, you'll have to specify what they will be using</em>
<input type="checkbox" name="category_level" onchange="categorychanged(this.checked)" />
<select name="category_parent" style="display:none" onchange="if(this.selectedIndex==SFTP){this.form['box'].style.visibility='visible'}else {this.form['box'].style.visibility='hidden'};">
<option value="1">Library</option>
<option value="2">SFTP</option>
</select>
<input style="visibility:hidden;" type="text" name="box">
</form>
<br />
</div>
The function, "categorychanged", is handled by the following Javascript code:
“categorychanged”函数由以下 Javascript 代码处理：
<script language="JavaScript" type="text/javascript">
<!--
function categorychanged(enable)
{
if (enable)
{
document.test.category_parent.style.display="block";
}
else
{
document.test.category_parent.style.display="none";
}
}
//-->
</script>
Right now, if I choose "SFTP", nothing happens. The first part works fine, i.e. dropdown displayed when the checkbox is selected.
现在，如果我选择“SFTP”，则什么也不会发生。第一部分工作正常，即选中复选框时显示的下拉列表。
What am I doing wrong here? Thanks
我在这里做错了什么？谢谢
采纳答案by LoveAndCoding
So, here's a fiddlewith working code. The issue is the value you are checking against.
this.selectedIndex
can be just
可以只是
this.value
But your code could also use some clean up. First off, unless you have some reason you are not doing so, I'd recommend a library like Prototype.jsor jQuery. That's going to make your job a lot easier. I would also recommend using event listenersinstead of inline events since they are cleaner.
但是你的代码也可以使用一些清理。首先，除非您有某种原因不这样做，否则我建议您使用Prototype.js或jQuery 之类的库。这会让你的工作轻松很多。我还建议使用事件侦听器而不是内联事件，因为它们更干净。
回答by Ortiga
You're using selectedIndex, which is a number representing the position of the option element
您正在使用 selectedIndex，这是一个表示选项元素位置的数字
In this example, Library is 0 and SFTP is 1, so you're doing SFTP == 1, which obviously evaluates to false.
在此示例中，Library 为 0，SFTP 为 1，因此您正在执行 SFTP == 1，这显然评估为 false。
If you want to get the value of option, use
如果要获取选项的值，请使用
<script type="text/javascript>
function changeVisibility(element)
{
var value = element[element.selectedIndex].value
if(value == "SFTP")
//show
else
//hide
}
</script>
<select onchange="changeVisibility(this)" >
<option value="Library">Library</option>
<option value="SFTP">SFTP</option>
</select>
Last, it's ok to write javascript like this when you still learning, but do not do this in a prodution environment... Learn a js library, such as jQuery, and completely separate javascript code from html... It's much cleaner to read and maintain
最后，你还在学习的时候这样写javascript是可以的，但是在生产环境中不要这样做......学习一个js库，比如jQuery，并且将javascript代码与html完全分开......阅读起来更干净并保持
This is a jQuery equivalent
这是一个 jQuery 等价物
<script type="text/javascript>
$(function(){
$("#myId").change(function(){
if($(this).val() == "SFTP")
//show
else
//hide
});
});
</script>
<select id="myId">
<option value="Library">Library</option>
<option value="SFTP">SFTP</option>
</select>
回答by Vivek Viswanathan
The problem here is in the condition "if (this.selectedIndex==SFTP)". SelectedIndex will give only the index and not the value. To get the value, you have to do -
这里的问题在于条件“if (this.selectedIndex==SFTP)”。SelectedIndex 将只提供索引而不是值。要获得价值，您必须这样做-
this.options[this.selectedIndex].value
