Question

你好主列表框它包含一个3值，所以如果我选择了第一个值它必须显示一个文本然后再次我选择了第二个值它必须显示列表框..就像我明智的去吧但没有结果

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.hidden 
{
    display: none;
}
</style>
<script>

function getValue()
{ 
  var x=document.getElementById("sel");
  var A=document.getElementById("a");
  var B=document.getElementById("b");
  var C=document.getElementById("c");

  for (var i = 0; i < x.options.length; i++) 
  {
     if(x.options[i].selected ==true)
     {
          if(x.options[i].value == "volvo")
           {
             A.style.display = 'block';
             B.style.display = 'none';
             C.style.display = 'none';
           }
         if(x.options[i].value == "Saab")
         {   
             A.style.display = 'block';
             B.style.display = 'none';
             C.style.display = 'none';
         }
         if(x.options[i].value == "Opel")
             {
             A.style.display = 'none';
             B.style.display = 'none';
             C.style.display = 'block';
             }


       }
  }
}
</script>
</head>
<body>
<select id="sel" onClick='getValue()'>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
</select>

 <div id="a" class="hidden">
    APPLE,Mango
</div>

<div id="b" class="hidden">
   <select>
   <option name="m">2</option>
   <option name="n">2</option>
   </select>
 </div>

 <div id="c" class="hidden">
 <select>
   <option name="e">3</option>
   <option name="f">3</option>
   </select>

   <select>
   <option name="i">4</option>
   <option name="j">4</option>
   </select>

</div>


</body>
</html>

Answer 1

在选择菜单上使用“onclick”事件是不明智的。请尝试使用“onChange”。

Answer 2

使用隐藏属性

a.hidden = FALSE;

检查这个

<body>
<select id="sel">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
</select>

<div id="a" hidden="hidden">
APPLE,Mango
</div>

<div id="b" hidden="hidden">
<select>
<option name="m">2</option>
<option name="n">2</option>
</select>
</div>

<div id="c" hidden="hidden">
<select>
<option name="e">3</option>
<option name="f">3</option>
</select>

<select>
<option name="i">4</option>
<option name="j">4</option>
</select>

</div>


</body>

并在脚本方面

var x=document.getElementById("sel");
var A=document.getElementById("a");
var B=document.getElementById("b");
var C=document.getElementById("c");

x.onchange=function()
{ 
      if(x.value == "volvo")
       {
       A.hidden=false;
          B.hidden=true; 
           C.hidden=true;
       }
     if(x.value == "saab")
     {  A.hidden=true;
          B.hidden=false; 
           C.hidden=true;

     }
     if(x.value == "opel")
         {
        A.hidden=true;
          B.hidden=true; 
           C.hidden=false;
         }

};

Answer 3

function getValue(ev)
{ 
var x=document.getElementById("sel");
var A=document.getElementById("a");
var B=document.getElementById("b");
  var C=document.getElementById("c");

  for (var i = 0; i < x.options.length; i++) 
  {
     if(x.options[i].selected ==true)
     {
       if(x.options[i].value == "volvo")
        {
         A.style.display = 'block';
         B.style.display = 'none';
         C.style.display = 'none';
       }
     if(x.options[i].value == "saab") //changed
     {   
         A.style.display = 'none'; //changed
         B.style.display = 'block';
         C.style.display = 'none';
     }
     if(x.options[i].value == "opel") //changed
         {
         A.style.display = 'none';
         B.style.display = 'none';
         C.style.display = 'block';
         }


       }
  }
}

var sel = document.getElementById('sel');

sel.addEventListener('change', getValue, false );

我更改了IF值名称，因为它们是大写的第一个字母，条件总是不匹配。：）

此外，第二个if设置为显示错误的div。

第三，使用addEventListener监听选择时的更改事件，不要使用onclick / onchange HTML。

jsFiddle

Answer 4

行。您的JavaScript代码也有点乱。首先，您不需要使用循环来完成工作。如果要根据某个选定的选项隐藏/显示元素，请先更改该功能以接受下拉列表中的值：

function getValue(selectedValue) {
    if (selectedValue == "volvo") {
        do something...
    }
    else if (selectedValue == "saab") {
        do something else...
    }
    else if (selectedValue == "Opel") {
        do something else...
    }
}

然后，函数调用将是：

onChange="getValue(this.value)"

如何在onclick上显示/隐藏列表框

4 个答案: