使用选择菜单以表格形式显示一些表格

时间:2015-07-08 08:10:24

标签: javascript html

我使用选择菜单在我的表单中显示某些表格但如果我想显示它则不会显示该表格。

这是我的代码:

HTML

<form>
<table>
<tr>
<td><select id="add" onchange="disablefield(this)" >
<option value="00">select</option>
<option value="a" >Name 1</option>
<option value="b" >Name 2</option>
<option value="c" >Name 3</option>
</select>
</tr></td>
<tr><td>&nbsp;</td></tr>
<tr style ="display:none;" id="name11"><td><input type="text" style="width:100%;background:#FAB89B;border:0;line-height: 20px;padding: 5px;"></td></tr>
        <tr><td>&nbsp;</td></tr>
        <tr style ="display:none;"id="name12"><td><input type="text" style="width:100%;background:#FAB89B;border:0;line-height: 20px;padding: 5px;"></td></tr>
        <tr><td>&nbsp;</td></tr>
        <tr style ="display:none;"id="name13"><td><input type="text" style="width:100%;background:#FAB89B;border:0;line-height: 20px;padding: 5px;"></td></tr>
        <tr><td>&nbsp;</td></tr>
</table>
</form>

的Javascript

function disablefield(e)
    {
        if (e == "a"){
            document.getElementById('name11').style.display = '';
else if (e == "b"){
                document.getElementById('name12').style.display = '';
else if (e == "c"){
                document.getElementById('name13').style.display = '';
}

感谢您的帮助。

3 个答案:

答案 0 :(得分:0)

您需要匹配值而不是元素本身,因为您已将元素传递给函数disablefield(this)。所以,而不是

if (e == ...

应该是

 if (e.value == ...

并正确关闭您的if声明

if (e.value == "a"){
    document.getElementById('name11').style.display = '';
}
else if (e.value == "b"){
    document.getElementById('name12').style.display = '';
}
else if (e.value == "c"){
    document.getElementById('name13').style.display = '';
}

答案 1 :(得分:0)

这样的事情可以解决问题:

function disablefield (select) {
    var selectedOption = select.options[select.selectedIndex].value;
    if (selectedOption == "a"){
        document.getElementById('name11').style.display = '';
    }
    else if (selectedOption == "b"){
        document.getElementById('name12').style.display = '';
    }
    else if (selectedOption == "c"){
        document.getElementById('name13').style.display = '';
    }
}

你可以在HTML中留下onchange =“disablefield(this)”。

您可以在此处查看:https://jsfiddle.net/pjdrfz8g/

答案 2 :(得分:0)

这是工作小提琴https://jsfiddle.net/pgur9j75/3/

问题在于

- e ==&#39; a&#39; ,Sol:e.value =&#39; a&#39; - if else ladder

缺少关闭括号
function disablefield(e)
    {
        if (e.value == 'a')
            document.getElementById('name11').style.display = 'block';
        else if (e.value == 'b')
                document.getElementById('name12').style.display = '';
        else if (e.value == 'c')
                document.getElementById('name13').style.display = '';
    }