0

嗨，我有主列表框，它包含一个 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>
4

4 回答 4

1

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

于 2013-09-02T04:46:39.853 回答
0

好的。你的 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)"
于 2013-09-02T05:15:16.520 回答
0 
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

于 2013-09-02T05:13:16.163 回答
0

使用隐藏属性

a.隐藏=假；

检查这个

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

};
于 2013-09-02T04:51:13.987 回答