Question

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

<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>

Answer 1

尝试

function showDiv(elem) {
  console.log(elem.value);
  if (elem.value == "Parents") {
    document.getElementById('l1').style.display = "block";
    document.getElementById('l2').style.display = "none";
    document.getElementById('l3').style.display = "none";
  }
  if (elem.value == "Relatives") {
    document.getElementById('l1').style.display = "none";
    document.getElementById('l2').style.display = "block";
    document.getElementById('l3').style.display = "none";
  }
  if (elem.value == "Non - Relatives") {
    document.getElementById('l1').style.display = "none";
    document.getElementById('l2').style.display = "none";
    document.getElementById('l3').style.display = "block";
  }
}

#l1,
#l2,
#l3 {
  display: none;
}

<select id="mySelect" onchange="showDiv(this)">
  <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>

Answer 2

这就是我要做的。我只是隐藏其他选项。并听听选择的变化。

  let select = document.getElementById("mySelect")
 select.addEventListener("change", function(){ 

 let opt1 = document.getElementById("l1");
 let opt2 =document.getElementById("l2");
 let opt3 =document.getElementById("l3");
 if(select.value === "Parents"){
 opt1.style.display = "block";
  opt2.style.display = "none";
   opt3.style.display = "none";
 }
  if(select.value === "Relatives"){
 opt1.style.display = "none";
  opt2.style.display = "block";
   opt3.style.display = "none";
 }
  if(select.value === "NonRelatives"){
 opt1.style.display = "none";
  opt2.style.display = "none";
   opt3.style.display = "block";
 }
});

<select id="mySelect">
        <option id="ll1" value="Parents">Parents</option>
        <option id="ll2" value="Relatives">Relatives</option>
        <option id="ll3" value="NonRelatives">Non - Relatives</option>
    </select>
  
    <div id="l1" style="display: block;"> 
    <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" style="display: none;">
    <input type="text" name="livingwithrelative" placeholder="Specify">
    <input type="text" name="livingwithrelative" placeholder="Reason"> <br>
    </div>
    <div  id="l3" style="display: none;">
    <input type="text" name="livingwithnonrelative" placeholder="Specify">
    <input type="text" name="livingwithnonrelative" placeholder="Reason"> <br><br>
    </div>

Answer 3

这是使用javascript的一种方法。

逻辑是：

例如，您显示选择并用css隐藏另一个div（display : none）
您使用onchange触发器，因此每次更改所选选项时，您都会做些事情
每次更改选定的选项时，只需检查当前选定的ID，并根据结果显示所需的div并隐藏其他

function displayBlock(opt) {
  var selected_id = opt[opt.selectedIndex].id; 
  
  switch (selected_id) {
    case 'll1':
      document.getElementById('l1').style.display = 'block';
      document.getElementById('l2').style.display = 'none';
      document.getElementById('l3').style.display = 'none';
      break;
    case 'll2':
      document.getElementById('l1').style.display = 'none';
      document.getElementById('l2').style.display = 'block';
      document.getElementById('l3').style.display = 'none';
       break;
    case 'll3':
      document.getElementById('l1').style.display = 'none';
      document.getElementById('l2').style.display = 'none';
      document.getElementById('l3').style.display = 'block';
      break;
    default :
      document.getElementById('l1').style.display = 'none';
      document.getElementById('l2').style.display = 'none';
      document.getElementById('l3').style.display = 'none';
  }
}

#l1, #l2, #l3 { display: none; }

<select id="mySelect" onchange="displayBlock(this);">
  <option id="none">-----------</option>
  <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 (l2)">
    <input type="text" name="livingwithrelative" placeholder="Reason"> <br>
</div>
<div  id="l3">
    <input type="text" name="livingwithnonrelative" placeholder="Specify (l3)">
    <input type="text" name="livingwithnonrelative" placeholder="Reason"> <br><br>
</div>

Answer 4

您的问题是这个

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

使用getElementById函数可以获取具有该ID的元素，为什么在获取要写入的元素之后

.element

那不是必须的，您应该写：

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

还有l2和l3元素

在选择标记中选择一个选项时，如何显示单选框或文本框？

4 个答案: