隐藏输入字段,直到选择了某个下拉列表值

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/

将输入类型更改为"text"并设置样式表display = 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";
    }
}