トグルを使用してテーブルに情報を表示すると、一度選択が行われます

私は今これをしばらくの間苦労しています。一番左の列に1つのドロップダウンメニューがあるページに1行4列のテーブルを表示し、そのドロップダウンから選択されたものに基づいて、残りの1行/ 3に特定の情報を表示したい列。私が今まで持っていたことは、自分が望む列に自分のデータを表示させることができません。トグルを使用してテーブルに情報を表示すると、一度選択が行われます

<html> 
<body onLoad="hideAll()"> 
<script> 
function toggleOption(thisselect) { 
    var selected = thisselect.options[thisselect.selectedIndex].value; 
    toggleRow(selected); 
} 

function toggleRow(id) { 
    var row = document.getElementById(id); 
    if (row.style.display == '') { 
    row.style.display = 'none'; 
    } 
    else { 
    row.style.display = ''; 
    } 
} 

function showRow(id) { 
    var row = document.getElementById(id); 
    row.style.display = ''; 
} 

function hideRow(id) { 
    var row = document.getElementById(id); 
    row.style.display = 'none'; 
} 

function hideAll() { 
hideRow('optionA'); 
hideRow('optionB'); 
hideRow('optionC'); 
hideRow('optionD'); 
} 

</script> 

<table> 
<tbody> 
    <tr> 
     <th>Size</th> 
     <th>Part Number</th> 
     <th>Description</th> 
     <th>Material</th> 
    </tr>  
<tr> 
    <td> 
<select id="options" onchange="toggleOption(this)"> 
<option value="optionA">3/16"</option> 
<option value="optionB">1/4"</option> 
<option value="optionC">5/16"</option> 
<option value="optionD">3/8"</option> 
</select> 
</td> 
<tr id="optionA"><td>3BMH</td><td>Brass Hose Mender</td><td>Brass</td></tr> 
<tr id="optionB"><td>4BMH</td><td>Brass Hose Mender</td><td>Brass</td></tr> 
<tr id="optionC"><td>5BMH</td><td>Brass Hose Mender</td><td>Brass</td></tr> 
<tr id="optionD"><td>6BMH</td><td>Brass Hose Mender</td><td>Brass</td></tr> 
</tr> 
</tbody> 
</table> 

</body> 
</html>

出典

2016-12-27 Ellen Harris

hideAll（）を追加できます。 before toggleRow（選択済み）;関数toggleOptionで指定します。 – gaetanoM

あなたが発生している問題は、あなたが何をすべきか、あなたの行（TR）は、細胞（TD）でなければなりませんが、これは非常に悪いアプローチであるということである4つのセル内の行だけの聖霊降臨祭を使用することで、その後、最初にあなたの選択など、空と1、およびそれらにデータを注入は、（ちょうどあなたのTDのinnerHTMLプロパティを変更する）、ここでは一例です。もちろん

<html> 
    <head> 
    <script> 
     function toggleoption(opt) { 
      var selected = opt.options[opt.selectedIndex].value; 
      if ("optiona" === selected) { 
       document.getElementById("partn").innerHTML = "3BMH"; 
       document.getElementById("desc").innerHTML = "Brass Hose Mender"; 
       document.getElementById("mat").innerHTML = "Brass"; 
      } else if ("optionb" === selected) { 
       document.getElementById("partn").innerHTML = "4BMH"; 
       document.getElementById("desc").innerHTML = "Brass Hose Mender"; 
       document.getElementById("mat").innerHTML = "Brass"; 
      } else if ("optionc" === selected) { 
       document.getElementById("partn").innerHTML = "5BMH"; 
       document.getElementById("desc").innerHTML = "Brass Hose Mender"; 
       document.getElementById("mat").innerHTML = "Brass"; 
      } else if ("optiond" === selected) { 
       document.getElementById("partn").innerHTML = "6BMH"; 
       document.getElementById("desc").innerHTML = "Brass Hose Mender"; 
       document.getElementById("mat").innerHTML = "Brass"; 
      } 
     } 
    </script> 
    </head> 
    <body> 
    <table> 
     <tbody> 
     <tr> 
      <th>Size</th> 
      <th>Part Number</th> 
      <th>Description</th> 
      <th>Material</th> 
     </tr> 
     <tr> 
      <td> 
      <select id="options" onchange="toggleoption(this)"> 
       <option value="optiona">3/16"</option> 
       <option value="optionb">1/4"</option> 
       <option value="optionc">5/16"</option> 
       <option value="optiond">3/8"</option> 
      </select> 
      </td> 
      <td id="partn"></td> 
      <td id="desc"></td> 
      <td id="mat"></td> 
     </tr> 
     </tbody> 
    </table> 
    </body> 
</html>

このコードを大幅に向上させることができると私は」 jqueryの使用を強く推奨しますが、それはあなた次第です。

出典

2016-12-27 21:51:25

時間を割いてこれを手伝っていただき、ありがとうございます。私は単にページからスピードを落とすことを恐れているので、jqueryから離れようとしていました。 JQueryに移動すると、.toggleを使うことをお勧めしますか？ –

私は本当にこのようにするには、オプションごとに3つのセルが必要であり、それらを一緒にラップする方法があります（私はあなたがどこに行を入れようとしているかと思います）。同じクラスを設定して各セルに応じて同じ文字列で異なるIDが開始され、それを切り替えますが、コードを維持するのが面倒で困難です。 –

トグルを使用してテーブルに情報を表示すると、一度選択が行われます

答えて

関連する問題