Javascript 在选择标签中选择选项时，如何显示RadioBox或TextBox？

我有一个带有3个选项的select元素

<select id="mySelect">
    <option id="ll1">Parents</option>
    <option id="ll2">Relatives</option>
    <option id="ll3">Non - Relatives</option>
</select>

父母
亲戚
非亲属

我想在选择一个选项时显示这些其他元素。选项父项将显示div l1，亲属选项将显示div l2，非亲属选项将显示div l3

<div id="l1">
    <input type="radio" name="livingwith" value="Both Parents">Both Parents
    <input type="radio" name="livingwith" value="Father Only">Father Only
    <input type="radio" name="livingwith" value="Mother Only">Mother Only
    <input type="radio" name="livingwith" checked="checked">None
</div>
<br>
<div id="l2">
    <input type="text" name="livingwithrelative" placeholder="Specify">
    <input type="text" name="livingwithrelative" placeholder="Reason">
    <br>
</div>
<div id="l3">
    <input type="text" name="livingwithnonrelative" placeholder="Specify">
    <input type="text" name="livingwithnonrelative" placeholder="Reason">
    <br>
    <br>
</div>

双亲
只有父亲
仅限母亲
没有一个

这就是我到目前为止所做的：

<script>
    function myFunction(){
        var e = document.getElementById("mySelect");
        var strSelected = e.options[e.selectedIndex].id;

        if(strSelected == "ll1") {
            document.getElementById("l1").element.style.display = "block";
        } else if(strSelected == "ll2") {
            document.getElementById("l2").element.style.display = "block";
        } else if(strSelected == "ll3") {
            document.getElementById("l3").element.style.display = "block";
        }
    }
</script>

    9. Living with:
<select onchange="myFunction()" id="mySelect">
    <option id="ll1">Parents</option>
    <option id="ll2">Relatives</option>
    <option id="ll3">Non - Relatives</option>
</select>
<div id="l1"> 
    <input type="radio" name="livingwith" value="Both Parents"> Both Parents
    <input type="radio" name="livingwith" value="Father Only"> Father Only
    <input type="radio" name="livingwith" value="Mother Only"> Mother Only 
    <input type="radio" name="livingwith" checked="checked"> None 
</div><br>
<div id="l2">
    <input type="text" name="livingwithrelative" placeholder="Specify">
    <input type="text" name="livingwithrelative" placeholder="Reason"> <br>
</div>
<div id="l3">
    <input type="text" name="livingwithnonrelative" placeholder="Specify">
    <input type="text" name="livingwithnonrelative" placeholder="Reason"> <br><br>
</div>

函数myFunction（）{
var e=document.getElementById（“mySelect”）；
var strSelected=e.options[e.selectedIndex].id；
如果（strSelected==“ll1”）{
document.getElementById（“l1”）.element.style.display=“block”；
}否则如果（strSelected==“ll2”）{
document.getElementById（“l2”）.element.style.display=“block”；
}否则如果（strSelected==“ll3”）{
document.getElementById（“l3”）.element.style.display=“block”；
}
}
9生活在：
父母
亲戚
非亲属
双亲
只有父亲
仅限母亲
没有一个

我就是这样做的。我会隐藏其他选项。并收听选择按钮的更改

let select=document.getElementById（“mySelect”）
select.addEventListener（“更改”，函数（）{
设opt1=document.getElementById（“l1”）；
让opt2=document.getElementById（“l2”）；
设opt3=document.getElementById（“l3”）；
如果（select.value==“父项”）{
opt1.style.display=“块”；
opt2.style.display=“无”；
opt3.style.display=“无”；
}
如果（select.value==“亲戚”）{
opt1.style.display=“无”；
opt2.style.display=“块”；
opt3.style.display=“无”；
}
如果（select.value==“非关系”）{
opt1.style.display=“无”；
opt2.style.display=“无”；
opt3.style.display=“块”；
}
});

父母
亲戚
非亲属
双亲
只有父亲
仅限母亲
没有一个







这里有一种使用javascript的方法

逻辑是：


例如，您可以使用css显示选择和隐藏另一个div（
display:none
）
您使用
onchange
触发器，因此每次更改所选选项时，您都会执行一些操作
每次选定的选项更改时，只需检查当前选定的id，然后根据结果显示所需的div并隐藏其他div


功能显示块（opt）{
var selected\u id=opt[opt.selectedIndex].id；
开关（选定的\u id）{
案例“ll1”：
document.getElementById（'l1'）.style.display='block'；
document.getElementById（'l2'）.style.display='none'；
document.getElementById（'l3'）.style.display='none'；
打破
案例“ll2”：
document.getElementById（'l1'）.style.display='none'；
document.getElementById（'l2'）.style.display='block'；
document.getElementById（'l3'）.style.display='none'；
打破
案例“ll3”：
document.getElementById（'l1'）.style.display='none'；
document.getElementById（'l2'）.style.display='none'；
document.getElementById（'l3'）.style.display='block'；
打破
违约：
document.getElementById（'l1'）.style.display='none'；
document.getElementById（'l2'）.style.display='none'；
document.getElementById（'l3'）.style.display='none'；
}
}
#l1、#l2、#l3{显示：无；}

-----------
父母
亲戚
非亲属
双亲
只有父亲
仅限母亲
没有一个







您的问题是：

document.getElementById("l1").element.style.display = "block";

通过函数getElementById，您可以获得具有该id的元素，为什么要在获得该元素之后再编写

.element

这不是必需的。如果你有元素，你应该写：

document.getElementById("l1").style.display = "block";

还有l2和l3元素
试试这个


函数showDiv（elem）{
控制台日志（元素值）；
如果（元素值==“父项”）{
document.getElementById（'l1'）.style.display=“block”；
document.getElementById（'l2'）.style.display=“无”；
document.getElementById（'l3'）.style.display=“无”；
}
如果（元素值==“亲属”）{
document.getElementById（'l1'）.style.display=“无”；
document.getElementById（'l2'）.style.display=“block”；
document.getElementById（'l3'）.style.display=“无”；
}
if（elem.value==“非亲属”）{
document.getElementById（'l1'）.style.display=“无”；
document.getElementById（'l2'）.style.display=“无”；
document.getElementById（'l3'）.style.display=“block”；
}
}
#l1，
#l2，
#l3{
显示：无；
}

父母
亲戚
非亲属
双亲
只有父亲
仅限母亲
没有一个







您能告诉我们到目前为止您做了哪些尝试吗？解释正在发生的事情和您期望发生的事情。@DragonThinks我尝试了一些别人尝试过的javascript，但对我来说不起作用。您可以使用jQuery吗？如果不向我们展示尝试，很难诊断您做错了什么。堆栈溢出不是一个免费的代码设计和编写服务。@DragonThinks我现在已经展示了我的工作