隐藏输入字段，直到选择了某些下拉值

Question

我试图将HTML中的文本字段保持隐藏状态，直到选择了某个下拉列表的特定值为止。 我对javascript非常不满意，并且我一直在寻找解决方案已有一段时间。

到目前为止，这是我可以共同努力的：

JavaScript代码：

function newCustomerType()
{
    var ddl = document.getElementById("customerType");
    var selectedValue = ddl.options[ddl.selectedIndex].value;

    if (selectedValue == "new")
    {
        document.getElementById('newType').type = text;
    }
    else
    {
        document.getElementById('newType').type = hidden;
    }
}

HTML代码：

<form id="newCustomer" name="newCustomer" method="post" action="">
<table>
    <tr>
        <td>Name:</td>
    </tr>
   <tr>
        <td><input type="text" name="customerName"/></td>
    </tr>
    <tr>
        <td>Type:</td>
    </tr>
    <tr>
        <td>
            <select id="customerType" name="customerType">
                <option value="existing">existing type</option>
                <option value="new">new type:</option>
            </select>
            <input type="hidden" id="newType" name="newType"/>
        </td>
    </tr>
    <tr>
    <tr>
        <td><input type="submit" value="Register"/></td>
    </tr>
</table>
</form>

这似乎不起作用。 我做错了什么事？ 任何帮助将不胜感激。

Answer 1

请查看此http://jsfiddle.net/2AALG/

将输入类型更改为“文本”，并将样式表显示设置为none

 <input type="text" id="newType" name="newType" style="display:none"/>

并在javascript中添加更改处理程序，并使用它来更改样式

var ddl = document.getElementById("customerType");
ddl.onchange=newCustomerType;
function newCustomerType()
{   
    var ddl = document.getElementById("customerType");
    var selectedValue = ddl.options[ddl.selectedIndex].value;


    if (selectedValue == "new")
    {   document.getElementById("newType").style.display = "block";
    }
    else
    {
       document.getElementById("newType").style.display = "none";
    }
}