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

所以，这里的小提琴与工作代码。 问题是您要检查的值。

this.selectedIndex

可以只是

this.value

但是您的代码也可以使用一些清理方法。 首先，除非您出于某些原因而不这样做，否则我建议您使用Prototype.js或jQuery之类的库。 这将使您的工作更加轻松。 我还建议使用事件侦听器，而不是内联事件，因为它们更干净。

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