複数のドロップダウンメニューの純粋なjavascriptの表示/非表示

これを単純なままにして、フォームを作成しようとすると、フォームが完成したときにフォームに3〜4個のドロップダウンリストを表示しますいくつかのドロップダウンでは、フォームに次の非表示のdivが表示されます。答えが「はい」の場合、他のユーザーは特定の部分を開きます。複数のドロップダウンメニューの純粋なjavascriptの表示/非表示

そして、はい、私はPHPを使用することはできませんか、jQueryの今、私は、このいずれかで最大ではないよ認めるだろうが、私の問題は、私だけにそれを得ることができる純粋なJavaScriptで

<!DOCTYPE html> 
<html> 

<body> 

<select onchange="showHideInput(this)"> 
<option value="0" ></option> 
    <option value="1" >Yes</option> 
    <option value="2">No</option> 
</select> 

<select onchange="showHideInput(this)"> 
<option value="3" ></option> 
    <option value="4" >Yes</option> 
    <option value="5">no</option> 
</select> 

<div id="dropone" style="display:none;">`enter code here` 
    words</label> 
    <div > 
     <input id="a" type="text" name="b" value="" /> 
    </div> 

<div id="droptwo" style="display:none;"> 
    more words</label> 
    <div > 
     <input id="a" type="text" name="b" value="" /> 
    </div> 



</body> 

<script> 
function showHideInput(sel) { 
    var value = sel.value; 
    if(value==1) 
     document.getElementById('dropone').style.display = 'block'; 
    if(value==2) 
      document.getElementById('dropone').style.display = 'none'; 
if(value==4) 
     document.getElementById('droptwo').style.display = 'block'; 
    if(value==5) 
     document.getElementById('droptwo').style.display = 'none'; 


}; 
</script> 
</html>

なければなりません私がここにいるものと少しはうまくいくが、droponeを使うと答えが肯定であればdropptwoの作業しか許されないが、答えが2でないときには後者を働かせたい。

何か助けが歓迎されています！

出典

2017-03-22 bekoruler

値は、あなたの質問を言い替えるていただけますか？ –

1.あなたのオープンクローズタグは一致せず、droptwoはドロップオンであった。あなたのハードコード2.Ifは、それはあなたが3-4ドロップダウンにスケールアップするために非常に良いではありませんので、私は、コードを少しリファクタリング

function showHideSwitcher(elementIdToShow) { 
 
    return { 
 
    showHideInput: function(sel, showOnValue) { 
 
     var currentValue = sel.value; 
 
     if (currentValue === showOnValue + "") { 
 
     document.getElementById(elementIdToShow).style.display = 'block'; 
 
     } else { 
 
     document.getElementById(elementIdToShow).style.display = 'none'; 
 
     } 
 
    } 
 
    } 
 
} 
 

 
var dropone = showHideSwitcher("dropone"); 
 
var droptwo = showHideSwitcher("droptwo");

<select onchange="dropone.showHideInput(this, 1)"> 
 
    <option value="0" ></option> 
 
    <option value="1" >Yes</option> 
 
    <option value="2">No</option> 
 
</select> 
 

 
<select onchange="droptwo.showHideInput(this, 4)"> 
 
    <option value="3" ></option> 
 
    <option value="4" >Yes</option> 
 
    <option value="5">no</option> 
 
</select> 
 

 
<select class="dropOneAlter" onchange="dropone.showHideInput(this, 1)"> 
 
    <option value="0" ></option> 
 
    <option value="1" >Yes</option> 
 
    <option value="0">no</option> 
 
</select> 
 

 
<select class="dropTwiAlter" onchange="droptwo.showHideInput(this, 'T')"> 
 
    <option value="F" ></option> 
 
    <option value="T" >Yes</option> 
 
    <option value="0">no</option> 
 
</select> 
 

 
<div id="dropone" style="display:none;"> 
 
    <label>`enter code here` words 
 
    </label> 
 
    <div> 
 
    <input id="a" type="text" name="b" value="" /> 
 
    </div> 
 
</div> 
 
<div id="droptwo" style="display:none;"> 
 
    <label>more words</label> 
 
    <div> 
 
    <input id="a" type="text" name="b" value="" /> 
 
    </div> 
 
</div>

出典

2017-03-22 18:17:40 YoungLearnsToCoding

あなたは天才です！それは実際に理にかなっています！ – bekoruler

あなたが求めていることは完全にはわかりませんが、各関数呼び出しの始めに要素を非表示にすることで、ほとんどの問題を解決できると思っています。これでスクリプトタグ内のコードを交換してみてください：

<script> 
function showHideInput(sel) { 
    var value = sel.value; 
    document.getElementById('dropone').style.display = 'none'; 
    document.getElementById('droptwo').style.display = 'none'; 
    if(value==1) 
     document.getElementById('dropone').style.display = 'block'; 
    if(value==2) 
      document.getElementById('dropone').style.display = 'none'; 
    if(value==4) 
      document.getElementById('droptwo').style.display = 'block'; 
    if(value==5) 
      document.getElementById('droptwo').style.display = 'none'; 
}; 
</script>

、それが助けかどうかを確認します。

出典

2017-03-22 17:54:08

複数のドロップダウンメニューの純粋なjavascriptの表示/非表示

答えて

関連する問題