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

以下是我试图实现的目标的屏幕截图：

基本上，如果用户选择“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>

图像托管
客户是否要求我们公司托管他们的图像

如果选择此选项，则必须指定他们将使用的内容
图书馆
SFTP

函数“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”，什么都不会发生。第一部分工作正常，即选中复选框时显示下拉列表

我做错了什么？

---

谢谢

这里的问题出现在“if（this.selectedIndex==SFTP）”条件下。SelectedIndex将只提供索引，而不提供值。要获得值，您必须执行以下操作-

this.options[this.selectedIndex].value

下面是工作代码。问题是您要检查的值

this.selectedIndex

可能只是

this.value

---

但是你的代码也需要一些清理。首先，除非你有什么理由不这样做，否则我推荐一个像或这样的图书馆。这会让你的工作轻松很多。我还建议使用而不是内联事件，因为它们更干净。

您使用的是selectedIndex，它是一个表示选项元素位置的数字

在本例中，库为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>

$（函数（）{
$（“#myId”）.change（函数（）{
如果（$（this.val（）=“SFTP”）
//展示
其他的
//隐藏
});
});
图书馆
SFTP

这很有效。。。非常感谢。至于使用库，正如您所知，我的javascript技能处于新手水平。不管怎样，这个网站只是一个模型，但这是我考虑的问题。再次感谢，没问题。我会推荐一个图书馆，尤其是如果你是新手的话。库使跨浏览器代码变得更容易，并且可以使您必须做的许多事情变得更容易。另外，这两款产品中的Sizzle选择器引擎对于查找元素来说都非常棒。：）很高兴认识@Ktash。还有一个有趣的功能要探索+1.不厌其烦地解释生产方法。谢谢你，安德烈

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