0

こんにちは、メインリストボックスに3つの値が含まれているので、最初の値を選択した場合、テキストを表示する必要があり、次に2番目の値を選択してリストボックスを表示する必要があります..同様に、試してみましたが結果はありません

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

隠し属性を使う

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

};
于 2013-09-02T04:51:13.987 に答える
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 値の名前を変更しました。最初の文字が大文字であるため、条件は常に不一致でした。:)

また、2番目のifが間違ったdivを表示するように設定されていました。

そして 3 番目に、addEventListener を使用して、選択時の変更イベントをリッスンします。onclick/onchange HTML のものは使用しないでください。

jsフィドル

于 2013-09-02T05:13:16.163 に答える
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 に答える