用javascript中的文本菜单替换下拉菜单答案

【问题标题】：replacing a dropdown menu with a text menu in javascript用javascript中的文本菜单替换下拉菜单
【发布时间】：2011-04-11 01:12:47
【问题描述】：

如果有人选择“其他”选项，我正在尝试用文本字段替换我的下拉菜单。现在在我的代码中，我将它替换为段落元素，因为我懒得找到用于设置文本字段的确切构造函数参数。 However, when "other" is selected nothing happens.

有人知道这是怎么回事吗？

<html>
<head>
<script type="text/javascript">
function testfunc(arg) {
    if(arg.value == "other") {
        document.thing.replaceChild(document.test, document.thing.selection)
    }
    else {
        alert("stuff")
    }
}
</script>
<body>
<form name="thing">
<select name="selection" onchange="testfunc(document.thing.selection.options[document.thing.selection.selectedIndex])">
<option>yes</option>
<option>no</option>
<option>other</option>
</select>
</form>
<p name="test">lkjsdf</p>
</body>
</html>

【问题讨论】：

标签： javascript javascript-events

【解决方案1】：

函数应该是这样的！其他不是其他！它区分大小写（无论如何在linux上......不确定其他操作系统）否则谢谢......一直在寻找这个......很酷的显示/隐藏方式

<script type="text/javascript">
function show_txt(arg,arg1)
{
if(document.getElementById(arg).value=='Other')
{
document.getElementById(arg1).style.display="block";
document.getElementById(arg).style.display="none";
}
else
{
document.getElementById(arg).style.display="block";
document.getElementById(arg1).style.display="none";
}
}
</script>

【讨论】：

【解决方案2】：

嘿，我看到了你的代码，你需要一些练习，

你忘了关闭标签。第二总是使用 id 而不是名称。第三，表单无法访问

标签。第四，您不能使用表单前缀访问表单以外的元素。第五，您可以动态创建

标签或将其放置在不显示的页面上。检查我的代码。这也是您可以动态生成它的方法。

var newP = document.createElement("p"); var txt = 'lkjsdf'; var newT = document.createTextNode(txt); newP.appendChild(newT);

<html>
<head></head>
<script type="text/javascript">
function testfunc(arg) {
    if(arg.value == "other") {
        document.thing.removeChild(document.thing.selection);
        document.getElementById('testText').style.display='inline';
    }
    else {
        alert("stuff");
    }
}
</script>
<body>
<form name="thing">
<select name="selection" onchange="testfunc(document.thing.selection.options[document.thing.selection.selectedIndex])">
<option>yes</option>
<option>no</option>
<option>other</option>
</select>
<p id="testText" style="display:none">lkjsdf</p>
</form>
</body>
</html>

【讨论】：

【解决方案3】：

function show_txt(arg,arg1)
{
if(document.getElementById(arg).value=='other')
{
document.getElementById(arg1).style.display="block";
document.getElementById(arg).style.display="none";
}
else
{
document.getElementById(arg).style.display="block";
document.getElementById(arg1).style.display="none";
}
}

这里的 HTML 代码：

<select id="arg" onChange="show_txt('arg','arg1');">
<option>yes</option>
<option>No</option>
<option>Other</option>
</select>
<input type="text" id="arg1" style="display:none;">

【讨论】：