Javascript：如果选择了下拉选项，则显示文本框

Question

这是我想要完成的截图：

基本上，如果用户选择“SFTP”，则应显示文本框。

这是我的代码：

<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>

函数“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>

现在，如果我选择“SFTP”，则没有任何反应。第一部分工作正常，即选中复选框时显示下拉列表。

我在这里做错了什么？ 感谢

Answer 1

所以，这是带有工作代码的a fiddle。问题是您要检查的价值。

this.selectedIndex

可以只是

this.value

但是你的代码也可以使用一些清理工具。首先，除非您有某些原因，否则我建议您使用Prototype.js或jQuery这样的库。这将使你的工作变得更容易。我还建议使用event listeners而不是内联事件，因为它们更清晰。

Answer 2

您正在使用selectedIndex，这是一个表示选项元素

位置的数字

在此示例中，Library为0且SFTP为1，因此您正在执行SFTP == 1，这显然会计算为false。

如果您想获得选项的值，请使用

<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>

最后，当你还在学习的时候写这样的javascript是可以的，但是不要在生产环境中这样做...学习一个js库，比如jQuery，并将javascript代码从html中完全分开......这很多清洁阅读和维护

这是一个等效的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>

Answer 3

这里的问题是“if（this.selectedIndex == SFTP）”。 SelectedIndex只给出索引而不是值。要获得价值，您必须这样做 -

this.options[this.selectedIndex].value