여러 개의 드롭 다운 메뉴의 순수한 자바 스크립트 표시/숨기기

나는 이것을 간단하게 유지하려고합니다. 예를 들어 또는 옵션없이 3-4 드롭 다운 목록을 원하는 양식으로 페이지가 인쇄 될 때 양식을 만들려고합니다. 드롭 다운 중 일부는 대답에 관계없이 양식의 다음 숨겨진 div를 열 것입니다. 다른 사람이 특정 부분을 여는 것은 대답이 '예'인 경우입니다.여러 개의 드롭 다운 메뉴의 순수한 자바 스크립트 표시/숨기기

그리고 그래 내가 PHP를 사용할 수 없습니다 또는 JQuery와 순수 자바 스크립트이어야한다

이제

<!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은 대답이 '예'일 때만 droptwo 작업을 허용 할 것이다.하지만 응답이 2가 아닌 경우 작업하기를 원한다.

도움이 무엇이든 환영합니다.

출처

2017-03-22 bekoruler

당신이 당신의 질문을 바꾸어 말하다하십시오 수를 리팩토링 것은 매우 좋지 않다 값? –

1. 귀하의 오픈 클로즈 태그가 일치하지 않으며 droptwo가 dropone에 있습니다. 당신이 하드 코드 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

여러 개의 드롭 다운 메뉴의 순수한 자바 스크립트 표시/숨기기

답변

관련 문제